Particler

Lightweight JavaScript canvas animation library for particles animation.

• Inspired by https://github.com/VincentGarreau/particles.js
• Written in TypeScript
• See examples on website or in examples/index.html

Installation

npm install particler --save

<!-- create canvas tag -->
<canvas id="particler-instance"></canvas>
<!-- define proper styles if needed -->

<!-- include particler.js library -->
<script src="node_modules/particler/dist/particler.js"></script>

<script type="text/javascript">
    // define your configuration (optional)
    var particlerOptions = {
        quantity: 50,
        fillColor: "#000"
    };

    // create particler instance
    var particlerExample = new Particler("particler-instance", particlerOptions);
</script>

Configuration

properties	type	default value	notes
backgroundColor	string	"transparent"	Canvas background color
fillColor	string	"#000000"	Dots and lines color
frameDuration	number	20	Frame update time
lineWidth	number	0.05	Lines width
minimalLineLength	number	250	The minimum height to draw lines beetwen dots
minSize	number	1	Minimal dot size
maxSize	number	3	Maximal dot size
quantity	number	20	Amount of dots in animation
speed	number	25	Distance of dot movement during frames