Creating Particles With JavaScript And Canvas – Particles.js

Category: Animation , Javascript | February 3, 2017
Author: nicovank
Views Total: 4,893 views
Official Page: Go to website
Last Update: February 3, 2017
License: MIT


Creating Particles With JavaScript And Canvas – Particles.js


Just another JavaScript library which utilizing HTML5 canvas and CSS to render randomly animated particles on the webpage.


$ npm install particles

How to use it:

Insert the main JavaScript file particles.js into the webpage.

<script src="particles.js"></script>

Create an HTML5 canvas element for the Particles.

<canvas id="particles"></canvas>

Render a default particle animation on the canvas element.

new Particles(document.getElementById("particles"));

Customize the particle animation:

new Particles(document.getElementById("particles"), {

    // size of the particles
    size: { 
      min: 0,
      max: 2

    // density of particles on the canvas
    density: 1000,  

    // speed of the particules
    speed: 3, 

    // number of times per second the canvas is refreshed
    fps: 60, 

    // color of the particles
    color: "#FFFFFF" 

You Might Be Interested In:

Leave a Reply