Free Background
Interactive Magnetic Node Mesh
An interactive HTML5 canvas particle node mesh where nearby points connect with luminous dynamic lines and repel away from the cursor.
Colours in this gradient
#020617#38bdf8#818cf8#ffffff
background: ;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="mag-node-stage">
<canvas id="magNodeCanvas" class="mn-canvas"></canvas>
<div class="mn-content">
<div class="mn-badge">Physics Mesh</div>
<h1>Magnetic Node Fabric</h1>
<p>Points connect dynamically based on proximity and scatter elastically around your pointer.</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 magnetic particle node mesh background on HTML5 Canvas in HTML, CSS and vanilla JavaScript. Requirements: - 70 moving particle nodes bouncing off viewport boundaries. - Particles within 110px distance automatically connect with semi-transparent lines whose opacity scales with closeness. - Cursor proximity (< 120px) creates an elastic repulsion force pushing nodes away. - 60fps requestAnimationFrame loop. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Initialize particles with random positions and velocities.
- 2
Check pairwise Euclidean distances between particles to draw connective lines.
- 3
Calculate mouse vector repulsion on nodes in proximity.
Customisation tips
- Restricting connection radius to 110px prevents performance degradation while keeping connections elegant.