How to make use of it:

1. Load the minified model of the ak-kaleidoscope plugin from the dist folder.

<script src="dist/kaleidoscope.min.js"></script>

2. Create an HTML canvas on which you wish to render the interactive particle background.

<canvas id="kaleidoscope"></canvas>

3. Make the canvas completely positioned.

.kaleidoscope {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

4. Initialize the plugin to create a default particle background.

const myBg = new Kaleidoscope({
      selector: '#kaleidoscope'
});

5. Determine the variety of particles & mirrors.

new Kaleidoscope({
    selector: '#kaleidoscope',
    edge: 10,
    quantity: 50
});

6. Override the default shapes used for the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    shapes: ['circle', drop, 'heart', 'oval', 'square', 'star', 'triangle', 'wave']
});

7. Set the min/max dimension of the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    minSize: 30,
    maxSize: 50
});

8. Specify an array of colors for the particles.

new Kaleidoscope({
    selector: '#kaleidoscope',
    color: ['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236']
});

9. Determine the motion velocity from 0 to 1.

new Kaleidoscope({
    selector: '#kaleidoscope',
    speed: .3
});

10. Set the kind of compositing operation to use when drawing new shapes.

new Kaleidoscope({
    selector: '#kaleidoscope',
    globalCompositeOperation: 'overlay'
});

11. Pause & resume the animation.

myBg.pauseAnimation();
myBg.resumeAnimation();

12. Destroy the occasion.

myBg.destroy();

Options

Methods

Create An Interactive Particle Background, ak-kaleidoscope Plugin/Github

See Demo And Download