Create Amazing Bubbles Background In Pure JavaScript – bubble-bg

Preview:

Description:

The bubble-bg JavaScript library let you create fantastic bubbles with gradient colors and smooth animations for the background. Powered by HTML5 canvas element and without the need of any images.

How to use it:

Load the core JavaScript file background.js in the document when needed.

<script async src="background.js"></script>

Create an HTML5 canvas element as this:

<canvas id="background"></canvas>

Make the canvas fullscreen that acts like a background.

#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}

All possible options with default values.

{
  resolution: 1,
  gradient:
  {
    resolution: 4,
    smallRadius: 0,
    hue:
    {
      min: 0,
      max: 360
    },
    saturation:
    {
      min: 40,
      max: 80
    },
    lightness:
    {
      min: 25,
      max: 35
    }
  },
  bokeh:
  {
    count: 30,
    size:
    {
      min: 0.1,
      max: 0.3
    },
    alpha:
    {
      min: 0.05,
      max: 0.4
    },
    jitter:
    {
      x: 0.3,
      y: 0.3
    }
  },
  speed:
  {
    min: 0.0001,
    max: 0.001
  },
  debug:
  {
    strokeBokeh: false,
    showFps: false
  }
};