Interactive Particles Animation In Pure JavaScript

Category: Animation , Javascript | September 9, 2019
Views Total:1,925 views
Official Page:Go to website
Last Update:September 9, 2019


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 a correct speed definition


  • Add controls of settings and optimize drawing

You Might Be Interested In:

Leave a Reply