Particle Network Animation In JavaScript

Preview:

Description:

A JavaScript-powered, interactive particle network animation with randomly generated particles, connectors, and background colors.

See Also:

• 5 Best Particles Animation JavaScript Libraries

How to use it:

1. Create an HTML5 canvas element on which you want to render the particle network animation.

<canvas>Your browser does not support the HTML5 Canvas API.</canvas>

/* make it fullscreen */
canvas {
  border: 1px solid rgb(211, 211, 211);
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

2. Load the main JavaScript in the document.

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

3. Initialize the animation. That’s it.

document.addEventListener('DOMContentLoaded', (event) => {
  canvasInit();
});