Interactive Particles Animation In Pure JavaScript

Category: Animation , Javascript | January 10, 2019
Author: Zilfaron
Views Total: 712
Official Page: Go to website
Last Update: January 10, 2019
License: MIT


Interactive Particles Animation In Pure JavaScript


Yet another interactive particles system built with JavaScript and Canvas API. These particles will automatically be connected by lines when they are close enough.

How to use it:

Load the necessary JavaScript files in the document.

<script src="libs/vector.js" async></script>
<script src="js/main.js" defer></script>

Apply your own CSS classes to the particle’s container.

.particles-area {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

Config the particles in the main.js.

let particleConfig = {
    r: 8,  // radius
    s: 1.9,  // speed
    acc: 0.65,  // acceleration
    maxS: 7,  // max speed
    sb: 11,  // shadow blur
    colors: [  // list of possible colors



  • Add controls of settings and optimize drawing

You Might Be Interested In:

Leave a Reply