Constellation drift

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/constellation-drift.html
  Desc   : Drifting star field with twinkling constellation lines
  ============================================================
-->
<div class="sg-constellation-drift" style="--sg-color:#CFD8FF; --sg-size:170px; --sg-duration:32s;">
  <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="sg-constellation-drift-sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#0a1228" />
        <stop offset="1" stop-color="#151b38" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="320" height="180" fill="url(#sg-constellation-drift-sky)" />
    <g class="sg-constellation-drift-roll">
      <g id="sg-constellation-drift-tile">
        <polyline class="sg-constellation-drift-link" points="34,48 78,30 122,58 150,34" />
        <polyline class="sg-constellation-drift-link" points="190,120 232,96 268,128 298,102" />
        <polyline class="sg-constellation-drift-link" points="60,140 96,116 140,148" />
        <circle class="sg-constellation-drift-s1" cx="34" cy="48" r="1.8" />
        <circle class="sg-constellation-drift-s2" cx="78" cy="30" r="1.4" />
        <circle class="sg-constellation-drift-s3" cx="122" cy="58" r="1.7" />
        <circle class="sg-constellation-drift-s1" cx="150" cy="34" r="1.3" />
        <circle class="sg-constellation-drift-s2" cx="190" cy="120" r="1.6" />
        <circle class="sg-constellation-drift-s3" cx="232" cy="96" r="1.9" />
        <circle class="sg-constellation-drift-s1" cx="268" cy="128" r="1.4" />
        <circle class="sg-constellation-drift-s2" cx="298" cy="102" r="1.6" />
        <circle class="sg-constellation-drift-s3" cx="60" cy="140" r="1.5" />
        <circle class="sg-constellation-drift-s1" cx="96" cy="116" r="1.8" />
        <circle class="sg-constellation-drift-s2" cx="140" cy="148" r="1.3" />
        <circle class="sg-constellation-drift-s3" cx="205" cy="24" r="1.2" />
        <circle class="sg-constellation-drift-s1" cx="255" cy="52" r="1.0" />
        <circle class="sg-constellation-drift-s2" cx="20" cy="90" r="1.1" />
        <circle class="sg-constellation-drift-s3" cx="305" cy="160" r="1.2" />
      </g>
      <use href="#sg-constellation-drift-tile" x="320" />
    </g>
  </svg>
</div>
<style>
  .sg-constellation-drift {
    width: 100%;
    min-width: 240px;
    height: var(--sg-size);
    overflow: hidden;
    border-radius: 8px;
  }
  .sg-constellation-drift svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-constellation-drift-roll {
    animation: sg-constellation-drift-move var(--sg-duration) linear infinite;
  }
  .sg-constellation-drift-link {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 0.6;
    opacity: 0.25;
  }
  .sg-constellation-drift circle {
    fill: var(--sg-color);
    animation: sg-constellation-drift-twinkle 3.8s ease-in-out infinite;
  }
  .sg-constellation-drift-s2 { animation-delay: -1.3s; }
  .sg-constellation-drift-s3 { animation-delay: -2.6s; }
  @keyframes sg-constellation-drift-move {
    from { translate: 0 0; }
    to   { translate: -320px 0; }
  }
  @keyframes sg-constellation-drift-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
</style>