Dynamic starfield-ish background with CSS and SVG

Snippets for a simple starfield backdrop that changes on each page
by Luna Nova
Before comparison
After comparison

Comparison of the same area on two different pages (drag to compare)


The background starfield on lunnova.dev updates slightly when changing pages; it's actually the same repeating SVG patterns viewed from different positions.

Fixed background galaxies represented by static dots juxtaposed with changing closer dot and gradients tries to give the impression of moving within a nebula.

  • Distinct tile sizes create a large non-repeating composite pattern period, although each tile's repeats are visible if you look closely
  • Opposite anchors against the full viewport: top-left vs bottom-right means different article heights reveal different portions of the tiled patterns

Implementation layer 1: html element§

  • SVG tiled at 607×613px
  • Anchored to left top
  • Lots of stars, varying sizes (0.5-2px) and colors
  <g opacity='0.7'>
    <circle cx='80' cy='80' r='2' fill='#ffffff'/>
    <circle cx='320' cy='240' r='1' fill='#7ee8e3'/>
    <circle cx='600' cy='160' r='2' fill='#ffffff'/>
    <circle cx='240' cy='480' r='1' fill='#6b5cb7'/>
    <circle cx='720' cy='600' r='1.6' fill='#7ee8e3'/>
    <!-- ... more stars -->
  </g>

html {
  background: url("data:image/svg+xml,...") repeat left top / 607px 613px,
    /* gradient layers below. it's nebula time! */
}

Implementation layer 2: body element§

  • SVG tiled at 373×373px
  • Anchored to right bottom
  • Fewer stars, sparser distribution
  <g opacity='0.6'>
    <circle cx='51' cy='89' r='1' fill='#ffffff'/>
    <circle cx='173' cy='234' r='0.8' fill='#7ee8e3'/>
    <circle cx='298' cy='67' r='1.2' fill='#ffffff'/>
    <circle cx='89' cy='298' r='0.6' fill='#5ecbcd'/>
    <!-- ... more stars -->
  </g>

body {
  background: transparent url("data:image/svg+xml,...");
  background-size: 373px 373px;
  background-position: right bottom;
}

Implementation layer 3: body::after element§

You get the idea! Another layer with a distinct size, and this time background-position: calc(13vw + 47px) calc(19vh + 83px); to make its position unique with the other tiles as the viewport changes.

Cite as BibTeX 
@misc{starfieldish-background,
    author = {Luna Nova},
    title = {Dynamic starfield-ish background with CSS and SVG},
    year = {2025},
    url = {https://lunnova.dev/articles/starfieldish-background/},
    urldate = {2025-11-08}
}
« Generating personalized OpenGraph embed images with typst 202510 Snippets »
tagged