spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/backgrounds/constellation-drift.html7  Desc   : Drifting star field with twinkling constellation lines8  ============================================================9-->10<!--svgarden11title: Constellation drift12slug: constellation-drift13category: backgrounds14tags: [background, stars, constellation, ambient]15difficulty: intermediate16techniques: [svg-use-tiling, translate-property, animation-delay, seamless-tiling]17how_it_works: >18  The whole star field is drawn once as a 320-unit tile, then a <use> element19  stamps a second copy exactly one tile-width to the right. Animating the20  group's translate by that same 320 units means frame one and the last frame21  are pixel-identical — the seamless-loop rule is: duplicate, offset by one22  period, translate by one period. Twinkling is a single opacity keyframe23  shared by every star; scattering the stars across three delay groups breaks24  the synchronization so the sky shimmers instead of blinking. Styles applied25  to the original tile automatically render in the <use> clone, so the26  twinkle comes along for free.27customizable:28  - { var: "--sg-color",    label: "Star color",  type: color, default: "#CFD8FF" }29  - { var: "--sg-size",     label: "Height",      type: range, min: 100, max: 300, default: 170, unit: px }30  - { var: "--sg-duration", label: "Drift speed", type: range, min: 10, max: 80, step: 1, default: 32, unit: s }31created: 2026-08-1032-->33<div class="sg-constellation-drift" style="--sg-color:#CFD8FF; --sg-size:170px; --sg-duration:32s;">34  <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">35    <defs>36      <linearGradient id="sg-constellation-drift-sky" x1="0" y1="0" x2="0" y2="1">37        <stop offset="0" stop-color="#0a1228" />38        <stop offset="1" stop-color="#151b38" />39      </linearGradient>40    </defs>41    <rect x="0" y="0" width="320" height="180" fill="url(#sg-constellation-drift-sky)" />42    <g class="sg-constellation-drift-roll">43      <g id="sg-constellation-drift-tile">44        <polyline class="sg-constellation-drift-link" points="34,48 78,30 122,58 150,34" />45        <polyline class="sg-constellation-drift-link" points="190,120 232,96 268,128 298,102" />46        <polyline class="sg-constellation-drift-link" points="60,140 96,116 140,148" />47        <circle class="sg-constellation-drift-s1" cx="34" cy="48" r="1.8" />48        <circle class="sg-constellation-drift-s2" cx="78" cy="30" r="1.4" />49        <circle class="sg-constellation-drift-s3" cx="122" cy="58" r="1.7" />50        <circle class="sg-constellation-drift-s1" cx="150" cy="34" r="1.3" />51        <circle class="sg-constellation-drift-s2" cx="190" cy="120" r="1.6" />52        <circle class="sg-constellation-drift-s3" cx="232" cy="96" r="1.9" />53        <circle class="sg-constellation-drift-s1" cx="268" cy="128" r="1.4" />54        <circle class="sg-constellation-drift-s2" cx="298" cy="102" r="1.6" />55        <circle class="sg-constellation-drift-s3" cx="60" cy="140" r="1.5" />56        <circle class="sg-constellation-drift-s1" cx="96" cy="116" r="1.8" />57        <circle class="sg-constellation-drift-s2" cx="140" cy="148" r="1.3" />58        <circle class="sg-constellation-drift-s3" cx="205" cy="24" r="1.2" />59        <circle class="sg-constellation-drift-s1" cx="255" cy="52" r="1.0" />60        <circle class="sg-constellation-drift-s2" cx="20" cy="90" r="1.1" />61        <circle class="sg-constellation-drift-s3" cx="305" cy="160" r="1.2" />62      </g>63      <use href="#sg-constellation-drift-tile" x="320" />64    </g>65  </svg>66</div>67<style>68  .sg-constellation-drift {69    width: 100%;70    min-width: 240px;71    height: var(--sg-size);72    overflow: hidden;73    border-radius: 8px;74  }75  .sg-constellation-drift svg {76    display: block;77    width: 100%;78    height: 100%;79  }80  .sg-constellation-drift-roll {81    animation: sg-constellation-drift-move var(--sg-duration) linear infinite;82  }83  .sg-constellation-drift-link {84    fill: none;85    stroke: var(--sg-color);86    stroke-width: 0.6;87    opacity: 0.25;88  }89  .sg-constellation-drift circle {90    fill: var(--sg-color);91    animation: sg-constellation-drift-twinkle 3.8s ease-in-out infinite;92  }93  .sg-constellation-drift-s2 { animation-delay: -1.3s; }94  .sg-constellation-drift-s3 { animation-delay: -2.6s; }95  @keyframes sg-constellation-drift-move {96    from { translate: 0 0; }97    to   { translate: -320px 0; }98  }99  @keyframes sg-constellation-drift-twinkle {100    0%, 100% { opacity: 1; }101    50%      { opacity: 0.3; }102  }103</style>104