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.

 class="brush:xml"><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

The post Create A Background Particles System With JavaScript And Canvas – nodes.js appeared first on CSS Script.