Custom Particles Animation With JavaScript And Canvas – particler

particler is a really small (~4kb) JS library which takes advantage of html5 canvas to make customizable particles animations for your webpage. Great for creating an animated, modern background for your web project.

Basic usage:

Download and add the minified version of particler into your webpage.

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

Create an html5 canvas element for the particles animation.

<canvas id="example"></canvas>

Declare a new Particler object with default options.

var ParticlerExample = new Particler("example");

Config the particles animation.

var ParticlerExample = new Particler("example",{
    // these are default options
    // Amount of particles
    quantity: 20,
    // line width
    lineWidth: 0.05,
    // color of particles
    fillColor: "black",
    // min/max sizes
    minSize: 1,
    maxSize: 3,
    // minimailist line length
    minimalLineLength: 250,
    // animation speed
    speed: 25,
    // frame update time
    frameDuration: 20,
    // background color
    backgroundColor: 'transparent'
    
});