spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/loaders/orbit-dots.html7  Desc   : Dots orbiting a center point at nested speeds8  ============================================================9-->10<!--svgarden11title: Orbit dots12slug: orbit-dots13category: loaders14tags: [loader, orbit, rotate, nested-animation]15difficulty: intermediate16techniques: [transform-origin, rotate, calc-durations, svg-groups]17how_it_works: >18  Each dot lives in its own <g> group that spins around the SVG center —19  the dot is simply drawn off-center, so rotating the group makes it orbit.20  All groups share one rotation keyframe; giving each a duration derived21  from the base speed with calc() (1×, 1.5×, 2×) means the dots drift in22  and out of alignment and only sync up once per full cycle.23customizable:24  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Size",  type: range, min: 32, max: 140, default: 64, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.8, max: 5, step: 0.1, default: 2, unit: s }27created: 2026-08-1028-->29<div class="sg-orbit-dots" style="--sg-color:#7F77DD; --sg-size:64px; --sg-duration:2s;">30  <svg viewBox="0 0 60 60" aria-hidden="true" focusable="false">31    <circle class="sg-orbit-dots-core" cx="30" cy="30" r="4" />32    <g><circle cx="30" cy="8"  r="4" /></g>33    <g><circle cx="30" cy="13" r="3" /></g>34    <g><circle cx="30" cy="18" r="2" /></g>35  </svg>36</div>37<style>38  .sg-orbit-dots {39    width: var(--sg-size);40    height: var(--sg-size);41  }42  .sg-orbit-dots svg {43    display: block;44    width: 100%;45    height: 100%;46  }47  .sg-orbit-dots circle {48    fill: var(--sg-color);49  }50  .sg-orbit-dots-core {51    opacity: 0.4;52  }53  .sg-orbit-dots g {54    transform-origin: 50% 50%;55    animation: sg-orbit-dots-turn var(--sg-duration) linear infinite;56  }57  .sg-orbit-dots g:nth-of-type(2) { animation-duration: calc(var(--sg-duration) * 1.5); opacity: 0.75; }58  .sg-orbit-dots g:nth-of-type(3) { animation-duration: calc(var(--sg-duration) * 2); opacity: 0.5; }59  @keyframes sg-orbit-dots-turn {60    100% { transform: rotate(360deg); }61  }62</style>63