Skip to content
Orbit CSS radial UI composer

Mandalas

Mandala 1

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite grow-2x gray-border"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> </div> <div class="orbit-2"> <div class="satellite grow-2x gray-border"></div> <div class="satellite grow-2x gray-border"></div> <div class="satellite grow-2x gray-border"></div> <div class="satellite grow-2x gray-border"></div> <div class="satellite grow-2x gray-border"></div> <div class="satellite grow-2x gray-border"></div> </div> </div> </div>
body {
  
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-0">
      <div class="satellite grow-2x gray-border">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-2">
      <div class="satellite grow-2x gray-border"></div>
      <div class="satellite grow-2x gray-border"></div>
      <div class="satellite grow-2x gray-border"></div>
      <div class="satellite grow-2x gray-border"></div>
      <div class="satellite grow-2x gray-border"></div>
      <div class="satellite grow-2x gray-border"></div>
    </div>
  </div>
</div>

Mandala 2

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-0"> </div> <div class="orbit-3"> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> <div class="satellite grow-4x gray-border"></div> </div> <div class="orbit-5 gray-border"></div> </div> </div>
body {
  
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-0">
    </div>
    <div class="orbit-3">
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
      <div class="satellite grow-4x gray-border"></div>
    </div>
    <div class="orbit-5 gray-border"></div>
  </div>
</div>

Mandala 3

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock angle-22"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite box at-center gray-border grow-3.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-3x" style="background: white;"></div> </div> </div> </div> </div> <div class="orbit-0"> <div class="satellite at-center spin-lock angle-67"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite box at-center gray-border grow-3.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-3x" style="background: white;"></div> </div> </div> </div> </div> <div class="orbit-0"> <div class="satellite at-center spin-lock angle-45"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite box at-center gray-border grow-3.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-3x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-1.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box angle-45 spin-lock at-center gray-border grow-1.9x" style="background: white;"></div> </div> <div class="orbit-2"> <div class="satellite box angle-45 spin-lock at-center gray-border grow-1x" style="background: white;"></div> </div> <div class="orbit-1"> <div class="satellite box angle-45 spin-lock at-center gray-border" style="background: white;"></div> </div> <div class="orbit-4 shrink-50 gray-border"></div> </div> </div> </div> <div class="orbit-0"> <div class="satellite at-center"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite box at-center gray-border grow-3.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-3x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box at-center gray-border grow-1.9x" style="background: white;"></div> </div> <div class="orbit-3"> <div class="satellite box angle-45 spin-lock at-center gray-border grow-1.9x" style="background: white;"></div> </div> <div class="orbit-2"> <div class="satellite box angle-45 spin-lock at-center gray-border grow-1x" style="background: white;"></div> </div> <div class="orbit-1"> <div class="satellite box angle-45 spin-lock at-center gray-border" style="background: white;"></div> </div> </div> </div> </div> </div> </div>
body {
  
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-0">
      <div class="satellite at-center spin-lock angle-22">
        <div class="gravity-spot">
          <div class="orbit-4">
            <div class="satellite box  at-center gray-border grow-3.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-3x" style="background: white;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-0">
      <div class="satellite at-center spin-lock angle-67">
        <div class="gravity-spot">
          <div class="orbit-4">
            <div class="satellite box  at-center gray-border grow-3.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-3x" style="background: white;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-0">
      <div class="satellite at-center spin-lock angle-45">
        <div class="gravity-spot">
          <div class="orbit-4">
            <div class="satellite box  at-center gray-border grow-3.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-3x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-1.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box angle-45 spin-lock at-center gray-border grow-1.9x" style="background: white;"></div>
          </div>
          <div class="orbit-2">
            <div class="satellite box angle-45 spin-lock at-center gray-border grow-1x" style="background: white;"></div>
          </div>
          <div class="orbit-1">
            <div class="satellite box angle-45 spin-lock at-center gray-border" style="background: white;"></div>
          </div>
          <div class="orbit-4 shrink-50 gray-border"></div>
        </div>
      </div>
    </div>
    <div class="orbit-0">
      <div class="satellite at-center">
        <div class="gravity-spot">
          <div class="orbit-4">
            <div class="satellite box  at-center gray-border grow-3.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-3x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box  at-center gray-border grow-1.9x" style="background: white;"></div>
          </div>
          <div class="orbit-3">
            <div class="satellite box angle-45 spin-lock at-center gray-border grow-1.9x" style="background: white;"></div>
          </div>
          <div class="orbit-2">
            <div class="satellite box angle-45 spin-lock at-center gray-border grow-1x" style="background: white;"></div>
          </div>
          <div class="orbit-1">
            <div class="satellite box angle-45 spin-lock at-center gray-border" style="background: white;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

Mandala 4

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4 from-22"> <div class="satellite inner-orbit spin-lock "> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> <div class="satellite inner-orbit spin-lock"> <div class="gravity-spot"> <div class="orbit-2"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> </div> <div class="orbit-4"> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.6x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1.1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.6x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div> </div> </div> </div> </div> <div class="orbit-2 from-22 transparent"> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0 "> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> <div class="satellite quarter-outer-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div> </div> </div> </div> </div> <div class="orbit-2"> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> <div class="satellite inner-orbit"> <div class="gravity-spot"> <div class="orbit-0"> <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div> <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div> </div> <div class="orbit-0"> <div class="satellite at-center gray-border grow-0.9x" style="background-color: white;"></div> <div class="satellite at-center gray-border grow-0.6x" style="background-color: white;"></div> <div class="satellite at-center gray-border grow-0.3x" style="background-color: white;"></div> <div class="satellite at-center gray-border " style="background-color: white;"></div> <div class="satellite at-center gray-border shrink-30" style="background-color: white;"></div> </div> </div> </div>
body {
  
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4 from-22">
      <div class="satellite inner-orbit spin-lock ">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit spin-lock">
        <div class="gravity-spot">
          <div class="orbit-2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-4">
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.6x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1.1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.6x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-1.4x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-1x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border grow-0.5x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-50" style="background-color: white;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-2 from-22 transparent">
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0 ">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30 " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite quarter-outer-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
            <div class="satellite  at-center spin-lock gray-border shrink-60" style="background-color: white;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-2">
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
      <div class="satellite inner-orbit">
        <div class="gravity-spot">
          <div class="orbit-0">
            <div class="satellite at-center spin-lock gray-border grow-0.3x" style="background-color: white;"></div>
            <div class="satellite at-center spin-lock gray-border " style="background-color: white;"></div>
            <div class="satellite  at-center spin-lock gray-border shrink-30" style="background-color: white;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-0">
      <div class="satellite at-center gray-border grow-0.9x" style="background-color: white;"></div>
      <div class="satellite at-center gray-border grow-0.6x" style="background-color: white;"></div>
      <div class="satellite at-center gray-border grow-0.3x" style="background-color: white;"></div>
      <div class="satellite at-center gray-border " style="background-color: white;"></div>
      <div class="satellite at-center gray-border shrink-30" style="background-color: white;"></div>
    </div>
  </div>
</div>

Show & Tell

Join to our Github Discussion and show off what have you done with Orbit.