Constellation Network

<!-- Constellation Network -->
<div class="nuda-pt2-constellation" role="img" aria-label="Constellation of connected points">
  <svg class="nuda-pt2-constellation__lines" viewBox="0 0 200 140" aria-hidden="true">
    <line x1="20" y1="30" x2="70" y2="60" />
    <line x1="70" y1="60" x2="120" y2="20" />
    <line x1="70" y1="60" x2="90" y2="110" />
    <line x1="90" y1="110" x2="150" y2="95" />
    <line x1="120" y1="20" x2="170" y2="45" />
    <line x1="150" y1="95" x2="170" y2="45" />
  </svg>
  <span class="nuda-pt2-constellation__node" style="left:10%; top:21.4%; --d:0s"></span>
  <span class="nuda-pt2-constellation__node" style="left:35%; top:42.9%; --d:.3s"></span>
  <span class="nuda-pt2-constellation__node" style="left:60%; top:14.3%; --d:.6s"></span>
  <span class="nuda-pt2-constellation__node" style="left:45%; top:78.6%; --d:.9s"></span>
  <span class="nuda-pt2-constellation__node" style="left:75%; top:67.9%; --d:1.2s"></span>
  <span class="nuda-pt2-constellation__node" style="left:85%; top:32.1%; --d:1.5s"></span>
</div>

.nuda-pt2-constellation {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 10/7;
  background: #0a0a0a;
  border-radius: 8px;
  overflow: hidden;
}

.nuda-pt2-constellation__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nuda-pt2-constellation__lines line {
  stroke: rgba(228,255,84,.35);
  stroke-width: 1;
  stroke-dasharray: 4 240;
  stroke-dashoffset: 0;
  animation: _nuda-pt2constellationline 3.6s ease-in-out infinite;
}

.nuda-pt2-constellation__node {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 8px rgba(228,255,84,.8);
  animation: _nuda-pt2constellationnode 2.8s ease-in-out var(--d) infinite;
}

@keyframes _nuda-pt2constellationline {
  0%,100% {
    opacity: .15;
  }
  50% {
    opacity: .7;
  }
}

@keyframes _nuda-pt2constellationnode {
  0%,100% {
    transform: scale(.8);
    opacity: .6;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-constellation__lines line,.nuda-pt2-constellation__node {
    animation: none !important;
  }
  .nuda-pt2-constellation__lines line {
    opacity: .4;
  }
  .nuda-pt2-constellation__node {
    opacity: .9;
    transform: scale(1);
  }
}