Interactive Star Constellation

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="constellation-wrap">
  <canvas id="starCanvas"></canvas>
  <div class="content">
    <span class="badge">Dynamic Neural Mesh</span>
    <h1>Connected Nodes</h1>
    <p>Fluid HTML5 canvas particle network with responsive connection bridges.</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 star constellation particle mesh on HTML5 canvas with JavaScript and CSS.

Requirements:
- Fullscreen dark canvas backdrop (#050713).
- Responsive particle count based on screen width.
- Dynamic distance calculation between nodes with connecting strokes that fade out as distance increases.
- Smooth bouncing off viewport boundaries.
- Centered typography badge and title above canvas.

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

How to build it, step by step

1. 1

   Initialize canvas full width and height with resize listener.

2. 2

   Populate particle array with random positions and velocities.

3. 3

   Calculate euclidean distance in nested loop and render connecting line bridges.

4. 4

   Update particle coordinates in requestAnimationFrame loop.

Customisation tips

• Keep connecting distance below 130px to maintain clean readability.
• Add pointer-events: none on overlay text so canvas click/hover events pass through.

More backgrounds