AI CSS Animations

Constellation Background

Star patterns light up one after another on a dark sky: the stars brighten, the lines between them draw themselves in, hold, then fade. Inline SVG paths with pathLength 1 drawn by stroke-dashoffset.

Also known as: constellation animation css, star map background, connected stars background, css galaxy animation.

HTML

<div class="bgx-constellations" aria-hidden="true">
  <svg class="bgx-constellations-sky" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid slice">
    <g class="bgx-constellations-figure" style="--i: 0">
      <path class="bgx-constellations-line" d="M28 40L56 34L82 42L106 56L110 82L146 88L150 60L106 56" pathLength="1" />
      <circle cx="28" cy="40" r="1.6" /><circle cx="56" cy="34" r="1.6" /><circle cx="82" cy="42" r="1.6" /><circle cx="106" cy="56" r="1.6" /><circle cx="110" cy="82" r="1.6" /><circle cx="146" cy="88" r="1.6" /><circle cx="150" cy="60" r="1.6" />
    </g>
    <g class="bgx-constellations-figure" style="--i: 1">
      <path class="bgx-constellations-line" d="M262 28L282 50L304 38L322 60L346 44" pathLength="1" />
      <circle cx="262" cy="28" r="1.6" /><circle cx="282" cy="50" r="1.6" /><circle cx="304" cy="38" r="1.6" /><circle cx="322" cy="60" r="1.6" /><circle cx="346" cy="44" r="1.6" />
    </g>
    <g class="bgx-constellations-figure" style="--i: 2">
      <path class="bgx-constellations-line" d="M200 78L180 98L190 130L178 166M200 78L222 92L212 124L226 162M190 130L201 127L212 124" pathLength="1" />
      <circle cx="200" cy="78" r="1.6" /><circle cx="180" cy="98" r="1.6" /><circle cx="222" cy="92" r="1.6" /><circle cx="190" cy="130" r="1.6" /><circle cx="201" cy="127" r="1.6" /><circle cx="212" cy="124" r="1.6" /><circle cx="178" cy="166" r="1.6" /><circle cx="226" cy="162" r="1.6" />
    </g>
    <g class="bgx-constellations-figure" style="--i: 3">
      <path class="bgx-constellations-line" d="M318 104L340 126L362 150M304 140L340 126L372 112" pathLength="1" />
      <circle cx="318" cy="104" r="1.6" /><circle cx="340" cy="126" r="1.6" /><circle cx="362" cy="150" r="1.6" /><circle cx="304" cy="140" r="1.6" /><circle cx="372" cy="112" r="1.6" />
    </g>
    <g class="bgx-constellations-figure" style="--i: 4">
      <path class="bgx-constellations-line" d="M60 140L78 128L96 146L82 166L60 140" pathLength="1" />
      <circle cx="60" cy="140" r="1.6" /><circle cx="78" cy="128" r="1.6" /><circle cx="96" cy="146" r="1.6" /><circle cx="82" cy="166" r="1.6" />
    </g>
  </svg>
</div>

CSS

.bgx-constellations {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 60% 30%, color-mix(in srgb, var(--c) 22%, #0a0e22), #03040b 80%);}
.bgx-constellations::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 0.04em at 76% 5.3%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.06em at 34.4% 6.8%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.05em at 79.3% 23.5%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.06em at 85.3% 75.5%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.08em at 53% 31.9%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.06em at 54.8% 25.9%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.07em at 87.5% 83.3%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.05em at 24.3% 53.8%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.05em at 82% 53.7%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.05em at 45.8% 80.1%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.06em at 24.5% 94%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.07em at 64.4% 84.6%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.05em at 76.5% 56.2%, rgb(255 255 255 / 0.7) 40%, transparent),
    radial-gradient(circle 0.07em at 46.6% 57.5%, rgb(255 255 255 / 0.7) 40%, transparent);
  background-size: 12em 9em;
  opacity: 0.6;
}
.bgx-constellations-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: bgx-constellations-drift 40s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bgx-constellations-figure {
  animation: bgx-constellations-show 15s cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--i) * -3s - 1s) infinite;
}
.bgx-constellations-line {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 55%, #fff);
  stroke-opacity: 0.7;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bgx-constellations-draw 15s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * -3s - 1s) infinite;
}
.bgx-constellations-figure circle {
  fill: #fff;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--c) 60%, #fff));
}
@keyframes bgx-constellations-show {
  0%   { opacity: 0.25; }
  8%   { opacity: 1; }
  52%  { opacity: 1; }
  66%  { opacity: 0.25; }
  100% { opacity: 0.25; }
}
@keyframes bgx-constellations-draw {
  0%, 6% { stroke-dashoffset: 1; opacity: 1; }
  28%    { stroke-dashoffset: 0; opacity: 1; }
  52%    { stroke-dashoffset: 0; opacity: 1; }
  64%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bgx-constellations-drift {
  from { transform: scale(1.04) translate(-1%, 0.5%); }
  to   { transform: scale(1.04) translate(1%, -0.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-constellations, .bgx-constellations::before, .bgx-constellations::after, .bgx-constellations *, .bgx-constellations *::before, .bgx-constellations *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-constellations, .bgx-constellations *, .bgx-constellations::before, .bgx-constellations::after, .bgx-constellations *::before, .bgx-constellations *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
  • Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar animated backgrounds

Parallax Starfield Background
Shooting Stars Background
Twinkling Stars Background
Spiral Galaxy Background