CSS-Driven Solar System

alle Arbeiten Web

12 November 2025

Ein kleines Universum, gebaut nur mit Code

Dieses Projekt begann mit dem Gedanken: „Ich animiere kurz mal einen Planeten“ und entwickelte sich still und leise zu einem kompletten Sonnensystem mit Monden, Schatten und einem prozedural erzeugten Asteroidengürtel. Gebaut nur mit HTML und SCSS, ganz ohne JavaScript, aber mit einer ziemlich großen Portion Enthusiasmus.

Genau solche Dinge mache ich gern in meiner Freizeit: mit Code kleine Welten bauen, mit Bewegung experimentieren und ausprobieren, wie weit man CSS treiben kann, bevor es ins Schwitzen kommt.

See the Pen Solar System - Revised with Moons and Asteroids by Chad Danford (@cmd1209) on CodePen. Fork das Projekt gern und schick mir einen Link, wenn du etwas Eigenes daraus gemacht hast.

Die Simulation enthält:
  • Planeten, die in ihren jeweiligen relativen Positionen kreisen
  • Monde wie unser Mond oder die vier galileischen Monde, die ihren Planeten folgen
  • Dynamische Schatten, je nachdem welche Seite zur Sonne zeigt
  • Einen vollständig generierten Asteroidengürtel, der überraschend natürlich wirkt
  • Orbits, Größen und Geschwindigkeiten, die komplett über Variablen steuerbar sind
Alles ist parametrisch aufgebaut: Ändert man einen einzigen Wert, etwa die Umlaufdauer der Erde, verschiebt sich das gesamte System stimmig mit. Genau darin liegt der Reiz von SCSS-Loops, etwas Mathematik und ziemlich viel Ausprobieren.
Der schwierigste und zugleich schönste Teil: der Asteroidengürtel
CSS kennt keine echte Zufälligkeit. Um mehr als 100 Asteroiden glaubwürdig chaotisch wirken zu lassen, also mit unterschiedlichen Abständen, Geschwindigkeiten und Startpositionen, musste ich die pseudozufälligen Möglichkeiten von SCSS ziemlich kreativ nutzen. Der entscheidende Moment war die Erkenntnis, dass sich eine natürliche Verteilung überzeugend vortäuschen lässt, wenn man diese Werte variiert:
  • Orbitalradius
  • Animationsgeschwindigkeit
  • Startversatz
Das Ergebnis: ein Gürtel, der lebendig wirkt, statt wie eine gepunktete Linie, die einfach nicht sauber ausgerichtet wurde. 
  /* Primary Palette */
//asteroids variables
$asteroid-number: 100
$asteroid-start: $au * 1.8
$asteroid-end: $au * 2.9

  @for $i from 1 through $asteroid-number 
  $randN: (random(10000) - 1) / 1000
  $asteroid-spread: random($asteroid-end - $asteroid-start) + $asteroid-start
  .orbit--asteroids:nth-of-type(#{$i})
    position: absolute
    top: 50%
    left: 50%
    border-radius: 50%
    transform-origin: center center
    width: #{$asteroid-spread * 2}
    height: #{$asteroid-spread * 2}
    margin-left: -#{$asteroid-spread}
    margin-top: -#{$asteroid-spread}
    animation: orbit (#{$ceres-year * (0.9 + random(20)/100)}) linear infinite
    animation-delay: -#{$randN * $earth-year}

.asteroid
  width: 2px
  height: 2px
  background-color: grey