Small JavaScript Library For Particles Animation – particles.js

Category: Animation , Javascript , Recommended | August 10, 2018
Author: marcbruederlin
Views Total: 4,125 views
Official Page: Go to website
Last Update: August 10, 2018
License: MIT


Small JavaScript Library For Particles Animation – particles.js


particles.js is a lightweight yet customizable JavaScript library used to draw a modern particles animation on an HTML5 canvas element.

How to use it:

Create an HTML5 canvas element on which you want to draw the animated particles.

<canvas id="demo"></canvas>

Download and place the particles.js library into your webpage where needed.

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

Initialize the particles.js and draw a default particles animation on the canvas element.

  selector: '#demo'

Customize the particles animation using the following settings.


  // an array of objects containing breakpoints and options
  responsive: null,

  // selector
  selector: null,

  // maximum number of particels
  maxParticles: 100,

  // size variations
  sizeVariations: 3,

  // shows particles
  showParticles: true,

  // animation speed
  speed: 0.5,

  // color of particles
  color: '#000000',

  // minimux number of distance between particles
  minDistance: 120,

  // draws lines between particles
  connectParticles: false



  • v2.2.3

You Might Be Interested In:

Leave a Reply