Orbit dots

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/orbit-dots.html
  Desc   : Dots orbiting a center point at nested speeds
  ============================================================
-->
<div class="sg-orbit-dots" style="--sg-color:#7F77DD; --sg-size:64px; --sg-duration:2s;">
  <svg viewBox="0 0 60 60" aria-hidden="true" focusable="false">
    <circle class="sg-orbit-dots-core" cx="30" cy="30" r="4" />
    <g><circle cx="30" cy="8"  r="4" /></g>
    <g><circle cx="30" cy="13" r="3" /></g>
    <g><circle cx="30" cy="18" r="2" /></g>
  </svg>
</div>
<style>
  .sg-orbit-dots {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-orbit-dots svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-orbit-dots circle {
    fill: var(--sg-color);
  }
  .sg-orbit-dots-core {
    opacity: 0.4;
  }
  .sg-orbit-dots g {
    transform-origin: 50% 50%;
    animation: sg-orbit-dots-turn var(--sg-duration) linear infinite;
  }
  .sg-orbit-dots g:nth-of-type(2) { animation-duration: calc(var(--sg-duration) * 1.5); opacity: 0.75; }
  .sg-orbit-dots g:nth-of-type(3) { animation-duration: calc(var(--sg-duration) * 2); opacity: 0.5; }
  @keyframes sg-orbit-dots-turn {
    100% { transform: rotate(360deg); }
  }
</style>