Orbiting planets

Mini solar system — planets on elliptical CSS offset-path orbits

motion-path advanced motionorbitplanetsoffset-path

Live preview

⚠ Browser support CSS offset-path on SVG children needs Chrome 116+, Safari 16+ or Firefox 122+. Unsupported browsers show a static system (planets resting on their orbit rails); the moon keeps spinning either way.

Techniques: offset-path · offset-distance · @supports · nested-transforms

Customizeupdates preview, code & clipboard

Code snippets/motion-path/orbit-planets.html

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/motion-path/orbit-planets.html
  Desc   : Mini solar system — planets on elliptical CSS offset-path orbits
  ============================================================
-->
<div class="sg-orbit-planets" style="--sg-sun:#EFBB33; --sg-color:#7F77DD; --sg-size:240px; --sg-duration:6s;">
  <svg viewBox="0 0 200 140" aria-hidden="true" focusable="false">
    <ellipse class="sg-orbit-planets-rail" cx="100" cy="70" rx="38" ry="20" />
    <ellipse class="sg-orbit-planets-rail" cx="100" cy="70" rx="64" ry="36" />
    <ellipse class="sg-orbit-planets-rail" cx="100" cy="70" rx="88" ry="52" />
    <circle class="sg-orbit-planets-sun" cx="100" cy="70" r="9" />
    <circle class="sg-orbit-planets-p sg-orbit-planets-p1" r="3.4" />
    <g class="sg-orbit-planets-p sg-orbit-planets-p2">
      <circle class="sg-orbit-planets-body" r="4.6" />
      <g class="sg-orbit-planets-moon-orbit">
        <circle class="sg-orbit-planets-moon" cx="8.5" cy="0" r="1.6" />
      </g>
    </g>
    <circle class="sg-orbit-planets-p sg-orbit-planets-p3" r="2.6" />
  </svg>
</div>
<style>
  .sg-orbit-planets {
    width: var(--sg-size);
  }
  .sg-orbit-planets svg {
    display: block;
    width: 100%;
  }
  .sg-orbit-planets-rail {
    fill: none;
    stroke: rgba(128, 128, 128, 0.35);
    stroke-width: 1;
    stroke-dasharray: 2 3;
  }
  .sg-orbit-planets-sun {
    fill: var(--sg-sun);
  }
  .sg-orbit-planets-p,
  .sg-orbit-planets-body {
    fill: var(--sg-color);
  }
  .sg-orbit-planets-p1 { opacity: 0.9;  transform: translate(62px, 70px); }
  .sg-orbit-planets-p2 { transform: translate(164px, 70px); }
  .sg-orbit-planets-p3 { opacity: 0.55; transform: translate(100px, 122px); }
  .sg-orbit-planets-moon {
    fill: var(--sg-color);
    opacity: 0.7;
  }
  .sg-orbit-planets-moon-orbit {
    transform-origin: 0 0;
    animation: sg-orbit-planets-spin 2.2s linear infinite;
  }
  @supports (offset-path: path('M0 0 L1 1')) {
    .sg-orbit-planets-p {
      transform: none;
      offset-rotate: 0deg;
      animation: sg-orbit-planets-fly var(--sg-duration) linear infinite;
    }
    .sg-orbit-planets-p1 {
      offset-path: path('M62 70 a38 20 0 1 1 76 0 a38 20 0 1 1 -76 0');
    }
    .sg-orbit-planets-p2 {
      offset-path: path('M36 70 a64 36 0 1 1 128 0 a64 36 0 1 1 -128 0');
      animation-duration: calc(var(--sg-duration) * 1.9);
      animation-delay: calc(var(--sg-duration) * -0.7);
    }
    .sg-orbit-planets-p3 {
      offset-path: path('M12 70 a88 52 0 1 1 176 0 a88 52 0 1 1 -176 0');
      animation-duration: calc(var(--sg-duration) * 3.1);
      animation-delay: calc(var(--sg-duration) * -1.4);
    }
  }
  @keyframes sg-orbit-planets-fly {
    to { offset-distance: 100%; }
  }
  @keyframes sg-orbit-planets-spin {
    to { transform: rotate(360deg); }
  }
</style>

Orbiting planets

More motion-path

Bee flight

Comet trail

Paper plane loop