Create A Background Particles System With JavaScript And Canvas – nodes.js

The nodes.js JavaScript library lets you create a particles system with animated nodes and connecting lines for the background.

Built using pure JavaScript and HTML5 canvas API.

How to use it:

Link to the nodes.js JavaScript library.

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

Create an HTML canvas element to place the particles system.

<canvas id="nodes"></canvas>

Create a new NodesJs object to generate a default particles system on the canvas.

var nodesjs = new NodesJs({
    // options here
});

Customize the particles system using the following parameters.

var nodesjs = new NodesJs({
    // container ID
    id: 'nodes',
    // width
    width: window.innerWidth,
    // height
    height: window.innerHeight,
    // background transition options
    backgroundFrom: [10, 25, 100],
    backgroundTo: [25, 50, 150],
    backgroundDuration: 4000,
    // the number of particles
    number: window.hasOwnProperty('orientation') ? 30: 100,
    // animation speed
    speed: 20
    
});

Changelog:

12/24/2025

• Fixed demo page