Constellation Particle Network

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="network-wrap">
  <canvas id="networkCanvas"></canvas>
  <div class="content">
    <span class="badge">Connected Nodes</span>
    <h1>Particle Network</h1>
    <p>Move mouse to attract and connect nodes.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an interactive constellation particle network background using an HTML canvas and vanilla JavaScript.

Requirements:
- A full-viewport container with deep dark radial-gradient background.
- Canvas that resizes dynamically to fit viewport.
- Generate particles based on screen area (roughly 1 node per 9000 square pixels) with random positions and velocities.
- In requestAnimationFrame loop, move particles and bounce off canvas boundaries.
- For each pair of nodes within DIST_MAX (120px), draw a connecting line whose opacity scales inversely with distance.
- When cursor moves over the canvas, connect nearby nodes to cursor position with an orange glowing line.
- Center a title and description with pointer-events: none.
- Prefers-reduced-motion: render static constellation without animation loop.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Set up a canvas covering the entire viewport, resizing its buffer on window resize.

2. 2

   Initialize particle objects with coordinates, small velocities, and radii.

3. 3

   In the render loop, update particle positions and bounce off screen edges.

4. 4

   Calculate pairwise Euclidean distance between nodes to draw connecting line segments.

5. 5

   Track pointer position to draw interactive connector lines between cursor and nearby nodes.

Customisation tips

• Keep DIST_MAX around 120px to avoid quadratic rendering bottlenecks.
• Use pointer events so interactive mouse connections work across touch and trackpad.
• Adding a second warm highlight color for mouse links makes the user's cursor feel like an active node.

More backgrounds