Interactive Constellation Web — HTML5 Canvas & JS Source Code

The Interactive Constellation Web is a signature “premium” background effect often found on modern SaaS landing pages and agency portfolios. It features a field of particles (stars) that drift through space and automatically draw connecting lines to their neighbors, creating a shifting, organic web. The entire system is interactive, with particles forming connections to the user’s cursor as it moves.

How It Works

This animation uses the HTML5 Canvas API for high-performance rendering. A JavaScript loop manages an array of “particle” objects, each with its own coordinates and velocity. In every frame, the particles are moved, and a nested loop checks the distance between every pair of particles. If the distance is below a certain threshold, a line is drawn between them with an opacity proportional to the distance. A final check connects nearby particles to the mouse coordinates, creating the “magnetic” web effect.

Use Cases

• Hero section backgrounds for technology or networking websites
• Subtle interactive backgrounds for login pages
• “Abstract” data visualization themes
• Interactive footers or header backgrounds

How to Customize

• Particle Density: Increase or decrease the count calculation in the init() function.
• Connection Range: Change the if (dist < 110) threshold to make the web tighter or more sparse.
• Link Color: Adjust the strokeStyle in the draw() function to match your brand colors (e.g., use a vibrant blue or neon green).
• Speed: Multiply the vx and vy values by a higher number to make the particles move faster and more energetically.

Frequently Asked Questions

Why use Canvas instead of DOM elements?

Drawing hundreds of lines and particles as individual DOM nodes (like <div> or <svg>) would be extremely slow because the browser has to track and re-calculate the position of every single element in the tree. Canvas treats the entire area as a single pixel grid, which is much faster for drawing many small, independent shapes.

Is it responsive?

Yes. The init() function is tied to a resize event listener, which re-calculates the canvas dimensions and particle count whenever the browser window changes size.

Can I change the particle shape?

Absolutely. Currently, it uses ctx.arc() to draw circles. You could replace this with ctx.fillRect() for squares or even ctx.drawImage() to use small custom icons or logos as particles.