Customizable Bubble Animation With JavaScript And Canvas – bubbly-bg

bubbly-bg is a JavaScript library which draws a customizable bubble animation on an html5 canvas element. Great for animated backgrounds.

Installation:

$ npm install bubbly-bg --save

How to use it:

Import the bubbly-bg library into your document.

<script src="bubbly-bg.js"></script>

Create an html canvas element on the web page.

<canvas id="demo" width="400" height="300"></canvas>

The JavaScript to draw a default bubble animation on the canvas element.

bubbly({
  canvas: document.getElementById("demo")
});

Config the bubbles as follows:

bubbly({
  animate: false,
  blur: 4, 
  bubbleFunc: () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
  bubbles: 100,
  canvas: document.querySelector("#background"),
  colorStart: "#2AE", 
  colorStop: "#17B",
  compose: "lighter", 
  
  shadowColor: "#fff",
  angleFunc: () => Math.random() * Math.PI * 2, // default is this
  
  velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
    
  radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
});

Changelog:

04/24/2023

• Update