Watch faces

Watch 1

<div class="bigbang"> <div class="gravity-spot clock-frame" style="color: slategray; --o-force: 200px"> <div class="orbit-11" style="border: 2px solid black;"></div> <!-- big clock ticks --> <div class="orbit-10 white-smoke-spot"> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> </div> <div class="orbit-10"> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> </div> <!-- big clock hours --> <div class="orbit-8"> <div class="satellite hours">12</div> <div class="satellite hours">1</div> <div class="satellite hours">2</div> <div class="satellite hours">3</div> <div class="satellite hours">4</div> <div class="satellite hours">5</div> <div class="satellite hours">6</div> <div class="satellite hours">7</div> <div class="satellite hours">8</div> <div class="satellite hours">9</div> <div class="satellite hours">10</div> <div class="satellite hours">11</div> </div> <!-- center black core --> <div class="orbit-7 black-spot"></div> <div class="orbit-4"> <!-- brand --> <div class="satellite grow-5x transparent" style="border-color: transparent"> <div class="capsule" style="color: rgb(229,229,229);">ORBIT</div> </div> <!-- small clocks --> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 200px"> <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div> <div class="medium orbit-2 shrink-20 " > <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1" style="font-size: 6px;"> <div class="satellite">30</div> <div class="satellite">05</div> <div class="satellite">10</div> <div class="satellite">15</div> <div class="satellite">20</div> <div class="satellite">25</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x angle-0 needle "></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 200px"> <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div> <div class="medium orbit-2 shrink-20 "> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1" style="font-size: 6px;"> <div class="satellite">60</div> <div class="satellite">15</div> <div class="satellite">30</div> <div class="satellite">45</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x needle xs"></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 200px"> <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div> <div class="medium orbit-2 shrink-20 "> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1" style="font-size: 6px;"> <div class="satellite">12</div> <div class="satellite">3</div> <div class="satellite">6</div> <div class="satellite">9</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x angle-0 needle "></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> </div> <!-- big clock --> <div class="orbit-0 clock"> <div class="vector grow-4x outer-orbit minute xm angle-45"> </div> <div class="vector grow-3x outer-orbit hour xh angle-300"> </div> <div class="satellite at-center center"> </div> </div> </div> </div>

.satellite {
border: none
}

HTML

<div class="bigbang">
  <div class="gravity-spot clock-frame" style="color: slategray; --o-force: 200px">
    <div class="orbit-11" style="border: 2px solid black;"></div>
    <!-- big clock ticks -->
    <div class="orbit-10 white-smoke-spot">
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
    </div>
    <div class="orbit-10">
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
    </div>
    <!-- big clock hours -->
    <div class="orbit-8">
      <div class="satellite hours">12</div>
      <div class="satellite hours">1</div>
      <div class="satellite hours">2</div>
      <div class="satellite hours">3</div>
      <div class="satellite hours">4</div>
      <div class="satellite hours">5</div>
      <div class="satellite hours">6</div>
      <div class="satellite hours">7</div>
      <div class="satellite hours">8</div>
      <div class="satellite hours">9</div>
      <div class="satellite hours">10</div>
      <div class="satellite hours">11</div>
    </div>
    <!-- center black core -->
    <div class="orbit-7 black-spot"></div>
    <div class="orbit-4">
      <!-- brand -->
      <div class="satellite grow-5x transparent" style="border-color: transparent">
        <div class="capsule" style="color: rgb(229,229,229);">ORBIT</div>
      </div>
      <!-- small clocks -->
      <div class="small-clock satellite transparent">
        <div class="gravity-spot" style="--o-force: 200px">
          <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div>
          <div class="medium orbit-2 shrink-20 " >
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
          </div>
          <div class="hours orbit-1" style="font-size: 6px;">
            <div class="satellite">30</div>
            <div class="satellite">05</div>
            <div class="satellite">10</div>
            <div class="satellite">15</div>
            <div class="satellite">20</div>
            <div class="satellite">25</div>
          </div>
          <div class="orbit-0">
            <div class="vector outer-orbit grow-1x angle-0 needle "></div>
            <div class="satellite at-center shrink-80 needle-center"></div>
          </div>
        </div>
      </div>
      <div class="small-clock satellite transparent">
        <div class="gravity-spot" style="--o-force: 200px">
          <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div>
          <div class="medium orbit-2 shrink-20 ">
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
          </div>
          <div class="hours orbit-1" style="font-size: 6px;">
            <div class="satellite">60</div>
            <div class="satellite">15</div>
            <div class="satellite">30</div>
            <div class="satellite">45</div>
          </div>
          <div class="orbit-0">
            <div class="vector outer-orbit grow-1x needle xs"></div>
            <div class="satellite at-center shrink-80 needle-center"></div>
          </div>
        </div>
      </div>
      <div class="small-clock satellite transparent">
        <div class="gravity-spot" style="--o-force: 200px">
          <div class="orbit-3 shrink-50" style="border: 1px solid black;"></div>
          <div class="medium orbit-2 shrink-20 ">
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
            <div class="vector inner-orbit shrink-70"></div>
          </div>
          <div class="hours orbit-1" style="font-size: 6px;">
            <div class="satellite">12</div>
            <div class="satellite">3</div>
            <div class="satellite">6</div>
            <div class="satellite">9</div>
          </div>
          <div class="orbit-0">
            <div class="vector outer-orbit grow-1x angle-0 needle "></div>
            <div class="satellite at-center shrink-80 needle-center"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- big clock -->
    <div class="orbit-0 clock">
      <div class="vector grow-4x outer-orbit minute xm angle-45">
      </div>
      <div class="vector grow-3x outer-orbit hour xh angle-300">
      </div>
      <div class="satellite at-center center">
      </div>
    </div>
  </div>
</div>

CSS

.satellite {
border: none
}

Watch 2

<div class="bigbang"> <div class="gravity-spot clock-frame" style="color: whitesmoke; --o-force: 200px"> <div class="orbit-11" > <div class="satellite at-center grow-12x" style="background-color: #373737; border-radius: 25px;"></div> </div> <div class="orbit-11 shrink-50" style="background-color: #595959;"></div> <!-- big clock ticks --> <div class="orbit-10 white-smoke-spot"> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> </div> <div class="orbit-10"> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> </div> <div class="orbit-10 from-3"> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> </div> <!-- big clock hours --> <div class="orbit-8"> <div class="satellite hours"> <div class="capsule">12</div> </div> <div class="satellite hours">1</div> <div class="satellite hours">2</div> <div class="satellite hours">3</div> <div class="satellite hours">4</div> <div class="satellite hours">5</div> <div class="satellite hours">6</div> <div class="satellite hours">7</div> <div class="satellite hours">8</div> <div class="satellite hours">9</div> <div class="satellite hours">10</div> <div class="satellite hours">11</div> </div> <!-- big clock --> <div class="orbit-0 clock"> <div class="vector grow-4x outer-orbit minute xm angle-45"> </div> <div class="vector grow-3x outer-orbit hour xh angle-300"> </div> </div> </div> </div>

.satellite {
border: none
}

HTML

<div class="bigbang">
  <div class="gravity-spot clock-frame" style="color: whitesmoke; --o-force: 200px">
    <div class="orbit-11" >
      <div class="satellite at-center  grow-12x" style="background-color:  #373737; border-radius: 25px;"></div>
    </div>
    <div class="orbit-11 shrink-50" style="background-color: #595959;"></div>
    <!-- big clock ticks -->
    <div class="orbit-10 white-smoke-spot">
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
    </div>
    <div class="orbit-10">
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
      <div class="vector shrink-50 inner-orbit medium"></div>
    </div>
    <div class="orbit-10 from-3">
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
      <div class="vector shrink-70 inner-orbit medium"></div>
    </div>
    <!-- big clock hours -->
    <div class="orbit-8">
      <div class="satellite hours">
        <div class="capsule">12</div>
      </div>
      <div class="satellite hours">1</div>
      <div class="satellite hours">2</div>
      <div class="satellite hours">3</div>
      <div class="satellite hours">4</div>
      <div class="satellite hours">5</div>
      <div class="satellite hours">6</div>
      <div class="satellite hours">7</div>
      <div class="satellite hours">8</div>
      <div class="satellite hours">9</div>
      <div class="satellite hours">10</div>
      <div class="satellite hours">11</div>
    </div>
    <!-- big clock -->
    <div class="orbit-0 clock">
      <div class="vector grow-4x outer-orbit minute xm angle-45">
      </div>
      <div class="vector grow-3x outer-orbit hour xh angle-300">
      </div>
    </div>
  </div>
</div>

CSS

.satellite {
border: none
}

Watch 3

<div class="bigbang"> <div class="gravity-spot clock-frame" style="color: black; --o-force: 200px"> <!-- big clock ticks --> <div class="orbit-10 white-smoke-spot"> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> </div> <div class="orbit-10" style="border: 1px solid black"> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> <div class="vector shrink-40 inner-orbit medium"></div> </div> <div class="orbit-10 shrink-70" style="border: 1px solid black"></div> <!-- big clock hours --> <div class="orbit-8" > <div class="satellite hours spin-lock "><div class="capsule flip ">XII</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">I</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">II</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">III</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">IV</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">V</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">VI</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">VII</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">VIII</div></div> <div class="satellite hours spin-lock "><div class="capsule flip ">IX</div></div> <div class="satellite hours spin-lock"><div class="capsule flip ">X</div></div> <div class="satellite hours spin-lock"> <div class="capsule flip ">XI</div></div> </div> <!-- big clock --> <div class="orbit-0 clock"> <div class="vector grow-4x outer-orbit minute xm angle-45"> </div> <div class="vector grow-3x outer-orbit hour xh angle-300"> </div> </div> </div> </div>

.satellite {
  border: none
}

HTML

<div class="bigbang">
  <div class="gravity-spot clock-frame" style="color: black; --o-force: 200px">
    <!-- big clock ticks -->
    <div class="orbit-10 white-smoke-spot">
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
      <div class="vector inner-orbit big-needle"></div>
    </div>
    <div class="orbit-10"  style="border: 1px solid black">
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
      <div class="vector shrink-40 inner-orbit medium"></div>
    </div>
    <div class="orbit-10 shrink-70"  style="border: 1px solid black"></div>
    <!-- big clock hours -->
    <div class="orbit-8" >
      <div class="satellite hours spin-lock "><div class="capsule flip ">XII</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">I</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">II</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">III</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">IV</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">V</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">VI</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">VII</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">VIII</div></div>
      <div class="satellite hours spin-lock "><div class="capsule flip ">IX</div></div>
      <div class="satellite hours spin-lock"><div class="capsule flip ">X</div></div>
      <div class="satellite hours spin-lock"> <div class="capsule flip ">XI</div></div>
    </div>
    <!-- big clock -->
    <div class="orbit-0 clock">
      <div class="vector grow-4x outer-orbit minute xm angle-45">
      </div>
      <div class="vector grow-3x outer-orbit hour xh angle-300">
      </div>
    </div>
  </div>
</div>

CSS

.satellite {
  border: none
}

Watch 4

<div class="bigbang"> <div class="gravity-spot clock-frame" style="color: slategray; --o-force: 320px"> <!-- curved text --> <div class="orbit-11 from-270 range-180"> <o-arc label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved" >ALARM 7:00AM</o-arc> <o-arc label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved digital-clock"></o-arc> </div> <div class="orbit-11 from-160 range-40 "> <o-arc flip text-anchor="middle" label-color="rgb(163,163,163)" class="demo-curved">500 • 30 • 12</o-arc> </div> <div class="calendar orbit-12 shrink-80 from-215 range-30"> <o-arc flip style="--bg-color: rgb(57,57,57); --o-arc-color: rgb(163,163,163); " text-anchor="middle" class="gap-3 rounded previous grow-0.2x">22</o-arc> <o-arc flip style="color: white; --o-arc-color: black; " text-anchor="middle" class="current gap-3 rounded grow-0.2x">23</o-arc> <o-arc flip style="--bg-color: rgb(57,57,57); --o-arc-color: rgb(163,163,163); " text-anchor="middle" class="gap-3 rounded next grow-0.2x">24</o-arc> </div> <div class="orbit-12 from-227 range-12 "> <o-arc flip style="color: white;" text-anchor="middle" class="outer-orbit day-name"></o-arc> </div> <!-- big clock ticks --> <div class="orbit-10 white-smoke-spot"> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> <div class="vector inner-orbit big-needle"></div> </div> <div class="orbit-10"> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> <div class="vector shrink-50 inner-orbit medium"></div> </div> <div class="orbit-10 from-3"> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> <div class="vector shrink-70 inner-orbit medium"></div> </div> <!-- big clock hours --> <div class="orbit-8"> <div class="satellite hours">12</div> <div class="satellite hours">1</div> <div class="satellite hours">2</div> <div class="satellite hours">3</div> <div class="satellite hours">4</div> <div class="satellite hours">5</div> <div class="satellite hours">6</div> <div class="satellite hours">7</div> <div class="satellite hours">8</div> <div class="satellite hours">9</div> <div class="satellite hours">10</div> <div class="satellite hours">11</div> </div> <!-- center black core --> <div class="orbit-7 black-spot"></div> <div class="orbit-4"> <!-- brand --> <div class="satellite grow-5x transparent" style="border-color: transparent"> <div class="capsule" style="color: rgb(229,229,229);">ORBIT</div> </div> <!-- small clocks --> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 320px"> <div class="small orbit-2 shrink-20 white-spot"> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> </div> <div class="medium orbit-2 shrink-20 "> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1"> <div class="satellite">30</div> <div class="satellite">05</div> <div class="satellite">10</div> <div class="satellite">15</div> <div class="satellite">20</div> <div class="satellite">25</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x angle-0 needle "></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 320px"> <div class="small orbit-2 shrink-20 white-spot"> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> </div> <div class="medium orbit-2 shrink-20 "> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1"> <div class="satellite">60</div> <div class="satellite">15</div> <div class="satellite">30</div> <div class="satellite">45</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x needle xs"></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> <div class="small-clock satellite transparent"> <div class="gravity-spot" style="--o-force: 320px"> <div class="small orbit-2 shrink-20 white-spot"> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> <div class="vector shrink-80 inner-orbit"></div> </div> <div class="medium orbit-2 shrink-20 "> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> <div class="vector inner-orbit shrink-70"></div> </div> <div class="hours orbit-1"> <div class="satellite">12</div> <div class="satellite">3</div> <div class="satellite">6</div> <div class="satellite">9</div> </div> <div class="orbit-0"> <div class="vector outer-orbit grow-1x angle-0 needle "></div> <div class="satellite at-center shrink-80 needle-center"></div> </div> </div> </div> </div> <!-- big clock --> <div class="orbit-0 clock"> <div class="vector outer-orbit minute xm"> <img src="/orbit-docs/images/minutes.png" width="132"> </div> <div class="vector outer-orbit hour xh"> <img src="/orbit-docs/images/hours.png" width="78"> </div> <div class="satellite at-center center"> </div> </div> </div> </div>

    .black-spot {
      background-color: black;
    }

    .white-smoke-spot {
      background-color: rgb(232, 226, 218);
      border: 1px inset #0000002b;
      outline: 2px solid rgb(232 226 218)
    }

    .white-spot {
      border: 1px inset #0000002b;
      background-color: rgb(229, 229, 229);
      outline: 2px solid rgb(229, 229, 229);
    }

    .hours {
      background-color: transparent;
      border: none;
    }

    .big-needle {
      height: 3px;
      border-radius: 2px;
    }
    .mini {
      background-color: rgb(255, 255, 255);
      outline: 2px solid rgb(254, 254, 254);
    }

    .small-clock {
        .small .vector {
        height: 1px;
        border-radius: 2px;
        background-color: gray;
      }

      .medium .vector {
        height: 2px;
        border-radius: 2px;
        background-color: rgb(0, 0, 0);
      }

      .hours .satellite {
        font-size: x-small;
        border: none;
        background-color: transparent;
        font-weight: 600;
      }

      .needle {
        background-color: rgb(255, 64, 25);
        height: 1.5px;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.537))
      }

      .needle-center {
        background-color: rgb(255, 64, 25);
      }

    }

    .transparent {
      background-color: transparent;
    }

    .clock>.center {
      border: 3px solid rgb(232, 226, 218);
      background-color: black;
    }

    .hour,
    .minute {
      filter: drop-shadow(4px 4px 5px black)
    }

    .hours {
      font-weight: 700 !important;
    }

   .component-label   {
      font-size: 16px;
      font-weight: 500
    }
    .demo-curved {
      font-size: 15px;
      font-weight: bold;
    }

    .calendar {
      font-size: 15px;
      font-weight: bold;
    }

    .invert-color {
      filter: invert(1);
    }

    .day-name {
      font-size: 15px;
      text-transform: uppercase;
      font-weight: bold;
    } 

function analogWatch() {
    // Get the current time
    const now = new Date()
    // Get the current hour, minute, and second
    const hour = now.getHours()
    const minute = now.getMinutes()
    const second = now.getSeconds()
    const today = now.getDate();
    const pastDate = new Date();
    pastDate.setDate(today - 1);
    const pastDay = pastDate.getDate();
    // Future today (1 today later)
    const futureDate = new Date();
    futureDate.setDate(today + 1);
    const futureDay = futureDate.getDate();
    const currentDayName = now.toLocaleString('en', { weekday: 'short' });
    const shortDayName = currentDayName.slice(0, 3);

    // Calculate the angles of the hour, minute, and second hands
    const hourAngle = (hour % 12) * 30 + minute / 2
    const minuteAngle = minute * 6
    const secondAngle = second * 6
    const hourPercentage = (hourAngle / 360) * 100
    const minutePercentage = (minuteAngle / 360) * 100
    const secondPercentage = (secondAngle / 360) * 100

    // Get the hour, minute, and second hand elements
    const hourHand = document.querySelector('.xh')
    const minuteHand = document.querySelector('.xm')
    const secondHand = document.querySelector('.xs')

    const curvedText = document.querySelector('.digital-clock')

    const current = document.querySelector('.calendar .current ')
    const previous = document.querySelector('.calendar .previous ')
    const next = document.querySelector('.calendar .next ')
    const dayName = document.querySelector('.day-name ')

    // Set the transform style of each hand element with angle correction
    hourHand.style.setProperty('--o-angle-composite', hourAngle - 90 + 'deg')
    minuteHand.style.setProperty('--o-angle-composite', minuteAngle - 90 + 'deg')
    secondHand.style.setProperty('--o-angle-composite', secondAngle - 90 + 'deg')
   
    if (curvedText.innerHTML === '' || hour === 0 ) {
      current.innerHTML = today
      previous.innerHTML = futureDay
      next.innerHTML = pastDay
      dayName.innerHTML = shortDayName
    }
    
     if (curvedText.innerHTML === '' || second === 0 ) curvedText.innerHTML = hour + ':' + minute + ',' + hour + 'H' + minute + 'M';
  }
  // Call the analogWatch function every second
  setInterval(analogWatch, 1000)

HTML

<div class="bigbang">
<div class="gravity-spot clock-frame" style="color: slategray; --o-force: 320px">
  <!-- curved text -->
  <div class="orbit-11 from-270 range-180">
    <o-arc label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved" >ALARM 7:00AM</o-arc>
    <o-arc label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved digital-clock"></o-arc>
  </div>
  <div class="orbit-11 from-160 range-40 ">
    <o-arc flip   text-anchor="middle" label-color="rgb(163,163,163)" class="demo-curved">500 • 30 • 12</o-arc>
  </div>
  <div class="calendar orbit-12 shrink-80 from-215 range-30">
    <o-arc flip style="--bg-color: rgb(57,57,57); --o-arc-color: rgb(163,163,163); " text-anchor="middle"
      class="gap-3 rounded previous grow-0.2x">22</o-arc>
    <o-arc flip style="color: white;  --o-arc-color: black; " text-anchor="middle" class="current gap-3 rounded grow-0.2x">23</o-arc>
    <o-arc flip style="--bg-color: rgb(57,57,57); --o-arc-color: rgb(163,163,163); " text-anchor="middle"
      class="gap-3 rounded next grow-0.2x">24</o-arc>
  </div>
  <div class="orbit-12 from-227 range-12 ">
    <o-arc flip style="color: white;" text-anchor="middle" class="outer-orbit day-name"></o-arc>
  </div>
  <!-- big clock ticks -->
  <div class="orbit-10 white-smoke-spot">
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
    <div class="vector inner-orbit big-needle"></div>
  </div>
  <div class="orbit-10">
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
    <div class="vector shrink-50 inner-orbit medium"></div>
  </div>
  <div class="orbit-10 from-3">
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
    <div class="vector shrink-70 inner-orbit medium"></div>
  </div>
  <!-- big clock hours -->
  <div class="orbit-8">
    <div class="satellite hours">12</div>
    <div class="satellite hours">1</div>
    <div class="satellite hours">2</div>
    <div class="satellite hours">3</div>
    <div class="satellite hours">4</div>
    <div class="satellite hours">5</div>
    <div class="satellite hours">6</div>
    <div class="satellite hours">7</div>
    <div class="satellite hours">8</div>
    <div class="satellite hours">9</div>
    <div class="satellite hours">10</div>
    <div class="satellite hours">11</div>
  </div>
  <!-- center black core -->
  <div class="orbit-7 black-spot"></div>
  <div class="orbit-4">
    <!-- brand -->
    <div class="satellite grow-5x transparent" style="border-color: transparent">
      <div class="capsule" style="color: rgb(229,229,229);">ORBIT</div>
    </div>
    <!-- small clocks -->
    <div class="small-clock satellite transparent">
      <div class="gravity-spot" style="--o-force: 320px">
        <div class="small orbit-2 shrink-20 white-spot">
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
        </div>
        <div class="medium orbit-2 shrink-20 ">
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
        </div>
        <div class="hours orbit-1">
          <div class="satellite">30</div>
          <div class="satellite">05</div>
          <div class="satellite">10</div>
          <div class="satellite">15</div>
          <div class="satellite">20</div>
          <div class="satellite">25</div>
        </div>
        <div class="orbit-0">
          <div class="vector outer-orbit grow-1x angle-0 needle "></div>
          <div class="satellite at-center shrink-80 needle-center"></div>
        </div>
      </div>
    </div>
    <div class="small-clock satellite transparent">
      <div class="gravity-spot" style="--o-force: 320px">
        <div class="small orbit-2 shrink-20 white-spot">
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
        </div>
        <div class="medium orbit-2 shrink-20 ">
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
        </div>
        <div class="hours orbit-1">
          <div class="satellite">60</div>
          <div class="satellite">15</div>
          <div class="satellite">30</div>
          <div class="satellite">45</div>
        </div>
        <div class="orbit-0">
          <div class="vector outer-orbit grow-1x needle xs"></div>
          <div class="satellite at-center shrink-80 needle-center"></div>
        </div>
      </div>
    </div>
    <div class="small-clock satellite transparent">
      <div class="gravity-spot" style="--o-force: 320px">
        <div class="small orbit-2 shrink-20 white-spot">
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
          <div class="vector shrink-80 inner-orbit"></div>
        </div>
        <div class="medium orbit-2 shrink-20 ">
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
          <div class="vector inner-orbit shrink-70"></div>
        </div>
        <div class="hours orbit-1">
          <div class="satellite">12</div>
          <div class="satellite">3</div>
          <div class="satellite">6</div>
          <div class="satellite">9</div>
        </div>
        <div class="orbit-0">
          <div class="vector outer-orbit grow-1x angle-0 needle "></div>
          <div class="satellite at-center shrink-80 needle-center"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- big clock -->
  <div class="orbit-0 clock">
    <div class="vector outer-orbit minute xm">
      <img src="/orbit-docs/images/minutes.png" width="132">
    </div>
    <div class="vector outer-orbit hour xh">
      <img src="/orbit-docs/images/hours.png" width="78">
    </div>
    <div class="satellite at-center center">
    </div>
  </div>
</div>
</div>

CSS

    .black-spot {
      background-color: black;
    }

    .white-smoke-spot {
      background-color: rgb(232, 226, 218);
      border: 1px inset #0000002b;
      outline: 2px solid rgb(232 226 218)
    }

    .white-spot {
      border: 1px inset #0000002b;
      background-color: rgb(229, 229, 229);
      outline: 2px solid rgb(229, 229, 229);
    }

    .hours {
      background-color: transparent;
      border: none;
    }

    .big-needle {
      height: 3px;
      border-radius: 2px;
    }
    .mini {
      background-color: rgb(255, 255, 255);
      outline: 2px solid rgb(254, 254, 254);
    }

    .small-clock {
        .small .vector {
        height: 1px;
        border-radius: 2px;
        background-color: gray;
      }

      .medium .vector {
        height: 2px;
        border-radius: 2px;
        background-color: rgb(0, 0, 0);
      }

      .hours .satellite {
        font-size: x-small;
        border: none;
        background-color: transparent;
        font-weight: 600;
      }

      .needle {
        background-color: rgb(255, 64, 25);
        height: 1.5px;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.537))
      }

      .needle-center {
        background-color: rgb(255, 64, 25);
      }

    }

    .transparent {
      background-color: transparent;
    }

    .clock>.center {
      border: 3px solid rgb(232, 226, 218);
      background-color: black;
    }

    .hour,
    .minute {
      filter: drop-shadow(4px 4px 5px black)
    }

    .hours {
      font-weight: 700 !important;
    }

   .component-label   {
      font-size: 16px;
      font-weight: 500
    }
    .demo-curved {
      font-size: 15px;
      font-weight: bold;
    }

    .calendar {
      font-size: 15px;
      font-weight: bold;
    }

    .invert-color {
      filter: invert(1);
    }

    .day-name {
      font-size: 15px;
      text-transform: uppercase;
      font-weight: bold;
    }

JS

function analogWatch() {
    // Get the current time
    const now = new Date()
    // Get the current hour, minute, and second
    const hour = now.getHours()
    const minute = now.getMinutes()
    const second = now.getSeconds()
    const today = now.getDate();
    const pastDate = new Date();
    pastDate.setDate(today - 1);
    const pastDay = pastDate.getDate();
    // Future today (1 today later)
    const futureDate = new Date();
    futureDate.setDate(today + 1);
    const futureDay = futureDate.getDate();
    const currentDayName = now.toLocaleString('en', { weekday: 'short' });
    const shortDayName = currentDayName.slice(0, 3);

    // Calculate the angles of the hour, minute, and second hands
    const hourAngle = (hour % 12) * 30 + minute / 2
    const minuteAngle = minute * 6
    const secondAngle = second * 6
    const hourPercentage = (hourAngle / 360) * 100
    const minutePercentage = (minuteAngle / 360) * 100
    const secondPercentage = (secondAngle / 360) * 100

    // Get the hour, minute, and second hand elements
    const hourHand = document.querySelector('.xh')
    const minuteHand = document.querySelector('.xm')
    const secondHand = document.querySelector('.xs')

    const curvedText = document.querySelector('.digital-clock')

    const current = document.querySelector('.calendar .current ')
    const previous = document.querySelector('.calendar .previous ')
    const next = document.querySelector('.calendar .next ')
    const dayName = document.querySelector('.day-name ')

    // Set the transform style of each hand element with angle correction
    hourHand.style.setProperty('--o-angle-composite', hourAngle - 90 + 'deg')
    minuteHand.style.setProperty('--o-angle-composite', minuteAngle - 90 + 'deg')
    secondHand.style.setProperty('--o-angle-composite', secondAngle - 90 + 'deg')

    if (curvedText.innerHTML === '' || hour === 0 ) {
      current.innerHTML = today
      previous.innerHTML = futureDay
      next.innerHTML = pastDay
      dayName.innerHTML = shortDayName
    }

     if (curvedText.innerHTML === '' || second === 0 ) curvedText.innerHTML = hour + ':' + minute + ',' + hour + 'H' + minute + 'M';
  }
  // Call the analogWatch function every second
  setInterval(analogWatch, 1000)

Codepen: link

Credits: This example is inspired on Amazfitwatchfaces

Show & Tell

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