Particle Network — Free HTML CSS JS Constellation Snippet

<section class="pn-hero">
  <canvas class="pn-canvas" id="pnCanvas" aria-hidden="true"></canvas>
  <div class="pn-content">
    <h1>Everything connected</h1>
    <p>A drifting constellation that links nearby nodes and reaches toward your cursor.</p>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#05050d;color:#fff}

.pn-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 40%,#10102a,#05050d)}
.pn-canvas{position:absolute;inset:0;width:100%;height:100%}
.pn-content{position:relative;z-index:1;padding:0 20px;max-width:600px;pointer-events:none}
.pn-content h1{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.pn-content p{margin-top:14px;font-size:16px;color:#9a9ac0}

var canvas = document.getElementById('pnCanvas');
var ctx = canvas.getContext('2d');
var W, H, dpr, nodes = [], mouse = { x: -9999, y: -9999 };
var LINK = 130, COLOR = '129,140,248';

function resize() {
  dpr = Math.min(devicePixelRatio || 1, 2);
  W = canvas.clientWidth; H = canvas.clientHeight;
  canvas.width = W * dpr; canvas.height = H * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  var count = Math.round(Math.min(W, 900) / 12);   // density scales with width
  nodes = [];
  for (var i = 0; i < count; i++) {
    nodes.push({ x: Math.random() * W, y: Math.random() * H,
      vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4 });
  }
}
window.addEventListener('resize', resize);
resize();

var hero = document.querySelector('.pn-hero');
hero.addEventListener('pointermove', function (e) {
  var r = canvas.getBoundingClientRect();
  mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
});
hero.addEventListener('pointerleave', function () { mouse.x = mouse.y = -9999; });

function draw() {
  ctx.clearRect(0, 0, W, H);
  // move nodes
  for (var i = 0; i < nodes.length; i++) {
    var n = nodes[i];
    n.x += n.vx; n.y += n.vy;
    if (n.x < 0 || n.x > W) n.vx *= -1;
    if (n.y < 0 || n.y > H) n.vy *= -1;
  }
  // links between nearby nodes (and to the cursor)
  for (var a = 0; a < nodes.length; a++) {
    for (var b = a + 1; b < nodes.length; b++) {
      var dx = nodes[a].x - nodes[b].x, dy = nodes[a].y - nodes[b].y;
      var d = Math.sqrt(dx * dx + dy * dy);
      if (d < LINK) {
        ctx.strokeStyle = 'rgba(' + COLOR + ',' + (1 - d / LINK) * 0.5 + ')';
        ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(nodes[a].x, nodes[a].y); ctx.lineTo(nodes[b].x, nodes[b].y); ctx.stroke();
      }
    }
    var mdx = nodes[a].x - mouse.x, mdy = nodes[a].y - mouse.y, md = Math.sqrt(mdx * mdx + mdy * mdy);
    if (md < LINK * 1.5) {
      ctx.strokeStyle = 'rgba(' + COLOR + ',' + (1 - md / (LINK * 1.5)) * 0.7 + ')';
      ctx.beginPath(); ctx.moveTo(nodes[a].x, nodes[a].y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
    }
  }
  // dots
  ctx.fillStyle = 'rgba(' + COLOR + ',.9)';
  for (var k = 0; k < nodes.length; k++) {
    ctx.beginPath(); ctx.arc(nodes[k].x, nodes[k].y, 2, 0, Math.PI * 2); ctx.fill();
  }
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);