Частицы-созвездие

<canvas class="pts"></canvas>

<script>
var cv = document.querySelector(".pts"), ctx = cv.getContext("2d");
var W = cv.width = cv.offsetWidth, H = cv.height = cv.offsetHeight;
var pts = [];
for (var i = 0; i < 70; i++) pts.push({
  x: Math.random(), y: Math.random(),
  vx: (Math.random() - .5) * .0007, vy: (Math.random() - .5) * .0007 });

(function loop() {
  ctx.clearRect(0, 0, W, H);
  pts.forEach(function (a) {                 // дрейф + отскок от краёв
    a.x += a.vx; a.y += a.vy;
    if (a.x < 0 || a.x > 1) a.vx *= -1;
    if (a.y < 0 || a.y > 1) a.vy *= -1;
  });
  for (var i = 0; i < pts.length; i++) {
    var ax = pts[i].x * W, ay = pts[i].y * H;
    ctx.fillStyle = "rgba(238,241,246,.75)";
    ctx.beginPath(); ctx.arc(ax, ay, 1.6, 0, 7); ctx.fill();
    for (var j = i + 1; j < pts.length; j++) {  // линии между близкими
      var bx = pts[j].x * W, by = pts[j].y * H;
      var d = Math.hypot(ax - bx, ay - by);
      if (d < 110) {
        ctx.strokeStyle = "rgba(238,241,246," + .25 * (1 - d / 110) + ")";
        ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(bx, by); ctx.stroke();
      }
    }
  }
  requestAnimationFrame(loop);
})();
</script>

Сделай фон-созвездие на canvas: ~70 точек с медленным дрейфом (скорости ±0.0007 в нормализованных координатах, отскок от краёв); между точками ближе 110px — линии с прозрачностью 0.25*(1-d/110). Точки радиусом 1.6px, светлые на тёмном. Бонус: точки в радиусе 130px от курсора подкрашивать акцентом и увеличивать. Пересчитывай размеры на resize, отключай при prefers-reduced-motion.