Examples

A dashboard

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-8 from-90"> <div class="satellite grow-5.5x right"> <div class="gravity-spot"> <div class="orbit-2 from-90"> <div class="satellite"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"> <path d="M313.33-80q-14.16 0-23.75-9.58-9.58-9.59-9.58-23.75v-664q0-14.17 9.58-23.75 9.59-9.59 23.75-9.59H400V-880h160v69.33h86.67q14.16 0 23.75 9.59 9.58 9.58 9.58 23.75v664q0 14.16-9.58 23.75Q660.83-80 646.67-80H313.33Zm33.34-493.33h266.66V-744H346.67v170.67Z" /> </svg> <span> 63% </span> </div> </div> </div> </div> </div> <div class="satellite grow-5.5x left"> <div class="gravity-spot"> <div class="orbit-2 from-270"> <div class="satellite"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"> <path d="m280-400 200-200.67L680-400H280Z" /> </svg> <span> 12º </span> <span> 5º</span> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"> <path d="M480-360 280-559.33h400L480-360Z" /> </svg> </div> </div> </div> </div> </div> </div> <div class="orbit-8"> <div class="satellite grow-8x at-center main"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" class="sun"> <path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z" /> </svg> <span class="place"> Constanta | 12º </span> <span class="time">6:59</span> <span>SUN <span class="day">11</span> APR</span> </div> <div class="gravity-spot"> <div class="orbit-9"> <div class="satellite angle-90 base"></div> </div> </div> </div> </div> <div class="orbit-8 shrink-50"> <o-progress value="56" class="from-180 shrink-80"></o-progress> </div> <div class="orbit-8"> <div class="satellite grow-8x at-center base-frame"> <div class="gravity-spot"> <div class="orbit-8"> <div class="satellite quarter-outer-orbit angle-180 grow-4x base"> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

    body {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      background-color: rgb(16, 16, 16) !important;
    }

    .main {
      border: 15px solid rgb(42, 45, 45);
      background-color: rgb(16, 16, 16);
      overflow: hidden;

    }

    .left,
    .right {
      border: 3px solid var(--o-cyan);
    }

    .base-frame {
      overflow: hidden;
    }

    .base {
      background-color: rgb(42, 45, 45);
      border-color: transparent;
    }

    .capsule {
      flex-direction: column;
      font-weight: 200;
      color: rgba(255, 255, 255, 0.548);
      font-size: 20px;
      text-align: center;
      line-height: 1;
    }

    .sun {
      fill: currentcolor;
      stroke-width: 20;
      stroke: rgb(16, 16, 16);
      margin-top: -50px;

    }

    .time {
      font-size: 100px;
      color: white;
      margin-bottom: 20px;
    }

    .day {
      vertical-align: sub;
      font-size: 40px;
    }

    .place {
      margin-bottom: 20px;
    }

    o-progress {
      --o-progress-color: var(--o-cyan);
      --o-bg-color: rgb(65, 71, 71);
    }

HTML

<div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-8 from-90">
        <div class="satellite grow-5.5x right">
          <div class="gravity-spot">
            <div class="orbit-2 from-90">
              <div class="satellite">
                <div class="capsule">
                  <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px"
                    fill="#FFFFFF">
                    <path
                      d="M313.33-80q-14.16 0-23.75-9.58-9.58-9.59-9.58-23.75v-664q0-14.17 9.58-23.75 9.59-9.59 23.75-9.59H400V-880h160v69.33h86.67q14.16 0 23.75 9.59 9.58 9.58 9.58 23.75v664q0 14.16-9.58 23.75Q660.83-80 646.67-80H313.33Zm33.34-493.33h266.66V-744H346.67v170.67Z" />
                  </svg>
                  <span>
                    63%
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="satellite grow-5.5x left">
          <div class="gravity-spot">
            <div class="orbit-2 from-270">
              <div class="satellite">
                <div class="capsule">
                  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"
                    fill="#FFFFFF">
                    <path d="m280-400 200-200.67L680-400H280Z" />
                  </svg>
                  <span>
                    12º
                  </span>

                  <span> 5º</span>
                  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"
                    fill="#FFFFFF">
                    <path d="M480-360 280-559.33h400L480-360Z" />
                  </svg>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="orbit-8">
        <div class="satellite grow-8x at-center main">
          <div class="capsule">
            <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" class="sun">
              <path
                d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z" />
            </svg>
            <span class="place">
              Constanta | 12º
            </span>

            <span class="time">6:59</span>
            <span>SUN <span class="day">11</span> APR</span>

          </div>
          <div class="gravity-spot">
            <div class="orbit-9">
              <div class="satellite angle-90 base"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="orbit-8 shrink-50">
        <o-progress value="56" class="from-180 shrink-80"></o-progress>
      </div>
      <div class="orbit-8">
        <div class="satellite grow-8x at-center base-frame">
          <div class="gravity-spot">
            <div class="orbit-8">
              <div class="satellite quarter-outer-orbit angle-180 grow-4x base">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

    body {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      background-color: rgb(16, 16, 16) !important;
    }

    .main {
      border: 15px solid rgb(42, 45, 45);
      background-color: rgb(16, 16, 16);
      overflow: hidden;

    }

    .left,
    .right {
      border: 3px solid var(--o-cyan);
    }

    .base-frame {
      overflow: hidden;
    }

    .base {
      background-color: rgb(42, 45, 45);
      border-color: transparent;
    }

    .capsule {
      flex-direction: column;
      font-weight: 200;
      color: rgba(255, 255, 255, 0.548);
      font-size: 20px;
      text-align: center;
      line-height: 1;
    }

    .sun {
      fill: currentcolor;
      stroke-width: 20;
      stroke: rgb(16, 16, 16);
      margin-top: -50px;

    }

    .time {
      font-size: 100px;
      color: white;
      margin-bottom: 20px;
    }

    .day {
      vertical-align: sub;
      font-size: 40px;
    }

    .place {
      margin-bottom: 20px;
    }

    o-progress {
      --o-progress-color: var(--o-cyan);
      --o-bg-color: rgb(65, 71, 71);
    }

Codepen: link

Credits: This dashboard mimicks this Pinterest

An abstract orbital map

<div class="bigbang"> <div class="gravity-spot" style="--o-force: 1000px"> <div class="orbit-3 invisible"> <div class="vector grow-4x"></div> <div class="vector grow-1.9x inner-orbit"></div> <div class="vector grow-3x angle-60"></div> <div class="vector grow-3x angle-90"></div> <div class="vector grow-4x"></div> <div class="vector grow-3x"></div> <div class="vector grow-1.9x inner-orbit"></div> <div class="vector grow-3x angle-240"></div> <div class="vector grow-5x"></div> <div class="vector grow-3x"></div> </div> </div> <div class="gravity-spot" style="--o-force: 90px"> <div class="orbit " style="border-style: dashed;"></div> <div class="orbit rotate-orbit rotate-time-4"> <div class="satellite visible shrink-50 angle-320"></div> </div> <div class="orbit rotate-orbit rotate-time-5"> <div class="satellite visible shrink-50 angle-20"></div> </div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit rotate-orbit rotate-time-3"> <div class="satellite visible shrink-50 angle-120"></div> </div> <div class="orbit" style="border-style: dashed;"></div> </div> <div class="gravity-spot uncentered " style="--o-force: 350px"> <div class="orbit-1 invisible"> <div class="satellite angle-270 invisible"> <div class="gravity-spot uncentered" style="--o-force: 150px"> <div class="orbit-6"></div> </div> </div> </div> <div class="orbit-2 shrink-60 invisible "> <div class="satellite angle-270 invisible"> <div class="gravity-spot uncentered " style="--o-force: 150px"> <div class="orbit-10 "> <div class="satellite angle-270 invisible rotate-orbit rotate-time-2 invert "> <div class="capsule rotate-orbit rotate-time-2" style="width: 400px; font-size: 5px; flex-direction: column; text-align: center;"> Orbit<br> THIRD EXTERNAL ORBITAL PATH<br> MERIDIAN SYSTEM </div> </div> </div> </div> </div> </div> <div class="orbit-4 shrink-40 invisible"> <div class="satellite angle-270 invisible"> <div class="gravity-spot uncentered" style="--o-force: 220px"> <div class="orbit-12 rotate-orbit rotate-time-2"> <div class="satellite visible shrink-50 angle-20"></div> <div class="satellite visible shrink-20 angle-135"></div> <div class="satellite visible shrink-60 angle-210"></div> </div> </div> </div> </div> <div class="orbit-12 rotate-orbit rotate-time-3"> <div class="satellite angle-60"> <div class="gravity-spot from-2x" style="--o-force: 90px"> <div class="orbit-1" style="background-color: rgba(255, 255, 255, 0.579);"> <div class="satellite at-center rotate-orbit rotate-time-3 invert"> <div class="capsule" style="width: 100px; font-size: 5px; flex-direction: column; text-align: center; color: black;"> PLANET </div> </div> </div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit-4" style="border-style: dashed;"></div> <div class="orbit-5 rotate-orbit rotate-time-3"> <div class="satellite visible shrink-50 angle-20"></div> <div class="satellite visible shrink-50"></div> </div> </div> </div> <div class="satellite angle-145"> <div class="gravity-spot" style="--o-force: 90px"> <div class="orbit" style="border-width: 2.5px;"></div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit" style="border-style: dashed;"></div> <div class="orbit rotate-orbit rotate-time-5 invert"> <div class="satellite visible shrink-50"></div> <div class="satellite visible shrink-50"></div> </div> </div> </div> </div> <div class="orbit-18 invisible rotate-orbit rotate-time-1"> <div class="satellite angle-270"> <div class="gravity-spot from-6x" style="--o-force: 90px"> <div class="orbit-12 rotate-orbit rotate-time-4 invert"> <div class="satellite visible grow-1x angle-120"> </div> </div> <div class="orbit-22 rotate-orbit rotate-time-1 invert"> <div class="satellite angle-90 invisible "> <div class="capsule" style="width: 400px; font-size: 5px; flex-direction: column; text-align: center;"> Orbit<br> SECOND EXTERNAL SYSTEM <br> MERIDIAN SYSTEM </div> </div> </div> <div class="orbit"> <div class="satellite visible grow-1x angle-120"> <div class="gravity-spot" style="--o-force: 300px"> <div class="orbit rotate-orbit rotate-time-4 invert"> <div class="satellite visible shrink-80"></div> <div class="satellite visible shrink-80"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

    body {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      background-color: rgb(16, 16, 16) !important;
      color: rgba(255, 255, 255, 0.451)
    }

    .orbit,
    [class*=orbit-] {
      border: 0.1px solid rgba(255, 255, 255, 0.422)
    }

    .invisible {
      border: none !important;
    }

    .vector {
      background-color: rgba(255, 255, 255, 0.259);
      height: 0.1px;
    }


    .visible {
      background-color: white;
      border: none
    }



    .rotate-orbit {
      animation-name: rotation;
      animation-iteration-count: 10;
      animation-timing-function: linear;
    }

    .rotate-time-1 {
      animation-duration: 40s;
    }

    .rotate-time-2 {
      animation-duration: 30s;
    }

    .rotate-time-3 {
      animation-duration: 20s;
    }

    .rotate-time-4 {
      animation-duration: 10s;
    }

    .rotate-time-5 {
      animation-duration: 5s;
    }

    .invert {
      animation-direction: reverse;
    }

    @keyframes rotation {
      0% {
        rotate: 360deg;
      }

      100% {
        rotate: 0deg;
      }
    }

HTML

 <div class="bigbang">
    <div class="gravity-spot" style="--o-force: 1000px">
      <div class="orbit-3 invisible">
        <div class="vector grow-4x"></div>
        <div class="vector grow-1.9x inner-orbit"></div>
        <div class="vector grow-3x angle-60"></div>
        <div class="vector grow-3x angle-90"></div>
        <div class="vector grow-4x"></div>
        <div class="vector grow-3x"></div>
        <div class="vector  grow-1.9x inner-orbit"></div>
        <div class="vector grow-3x angle-240"></div>
        <div class="vector grow-5x"></div>
        <div class="vector grow-3x"></div>
      </div>
    </div>
    <div class="gravity-spot" style="--o-force: 90px">
      <div class="orbit " style="border-style: dashed;"></div>
      <div class="orbit  rotate-orbit rotate-time-4">
        <div class="satellite visible shrink-50 angle-320"></div>
      </div>
      <div class="orbit rotate-orbit rotate-time-5">
        <div class="satellite visible shrink-50 angle-20"></div>
      </div>
      <div class="orbit" style="border-style: dashed;"></div>
      <div class="orbit rotate-orbit rotate-time-3">
        <div class="satellite visible shrink-50 angle-120"></div>
      </div>
      <div class="orbit" style="border-style: dashed;"></div>
    </div>
    <div class="gravity-spot uncentered  " style="--o-force: 350px">
      <div class="orbit-1 invisible">
        <div class="satellite angle-270 invisible">
          <div class="gravity-spot uncentered" style="--o-force: 150px">
            <div class="orbit-6"></div>
          </div>
        </div>
      </div>
      <div class="orbit-2 shrink-60 invisible ">
        <div class="satellite angle-270 invisible">
          <div class="gravity-spot uncentered  " style="--o-force: 150px">
            <div class="orbit-10 ">
              <div class="satellite angle-270 invisible rotate-orbit rotate-time-2 invert ">
                <div class="capsule rotate-orbit rotate-time-2" style="width: 400px; font-size: 5px; flex-direction: column; text-align: center;">
                  Orbit<br>
                  THIRD EXTERNAL ORBITAL PATH<br>
                  MERIDIAN SYSTEM
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="orbit-4 shrink-40 invisible">
        <div class="satellite angle-270 invisible">
          <div class="gravity-spot uncentered" style="--o-force: 220px">
            <div class="orbit-12 rotate-orbit rotate-time-2">
              <div class="satellite visible shrink-50 angle-20"></div>
              <div class="satellite visible shrink-20 angle-135"></div>
              <div class="satellite visible shrink-60 angle-210"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="orbit-12 rotate-orbit rotate-time-3">
        <div class="satellite angle-60">
          <div class="gravity-spot from-2x" style="--o-force: 90px">
            <div class="orbit-1" style="background-color: rgba(255, 255, 255, 0.579);">
              <div class="satellite at-center rotate-orbit rotate-time-3 invert">
                <div class="capsule" style="width: 100px; font-size: 5px; flex-direction: column; text-align: center; color: black;">
                  PLANET
                </div>
              </div>
            </div>

            <div class="orbit" style="border-style: dashed;"></div>
            <div class="orbit-4" style="border-style: dashed;"></div>
            <div class="orbit-5 rotate-orbit rotate-time-3">
              <div class="satellite visible shrink-50 angle-20"></div>
              <div class="satellite visible shrink-50"></div>
            </div>
          </div>
        </div>
        <div class="satellite angle-145">
          <div class="gravity-spot" style="--o-force: 90px">
            <div class="orbit" style="border-width: 2.5px;"></div>
            <div class="orbit" style="border-style: dashed;"></div>
            <div class="orbit" style="border-style: dashed;"></div>
            <div class="orbit" style="border-style: dashed;"></div>
            <div class="orbit" style="border-style: dashed;"></div>
            <div class="orbit rotate-orbit rotate-time-5 invert">
              <div class="satellite visible shrink-50"></div>
              <div class="satellite visible shrink-50"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="orbit-18 invisible rotate-orbit rotate-time-1">
        <div class="satellite angle-270">
          <div class="gravity-spot from-6x" style="--o-force: 90px">
            <div class="orbit-12 rotate-orbit rotate-time-4 invert">
              <div class="satellite visible grow-1x angle-120">

              </div>
            </div>
            <div class="orbit-22   rotate-orbit rotate-time-1 invert">
              <div class="satellite angle-90 invisible ">
                <div class="capsule" style="width: 400px; font-size: 5px; flex-direction: column; text-align: center;">
                  Orbit<br>
                  SECOND EXTERNAL SYSTEM <br>
                  MERIDIAN SYSTEM
                </div>
              </div>
            </div>

            <div class="orbit">
              <div class="satellite visible grow-1x angle-120">
                <div class="gravity-spot" style="--o-force: 300px">
                  <div class="orbit rotate-orbit rotate-time-4 invert">
                    <div class="satellite visible shrink-80"></div>
                    <div class="satellite visible shrink-80"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

CSS

    body {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      background-color: rgb(16, 16, 16) !important;
      color: rgba(255, 255, 255, 0.451)
    }

    .orbit,
    [class*=orbit-] {
      border: 0.1px solid rgba(255, 255, 255, 0.422)
    }

    .invisible {
      border: none !important;
    }

    .vector {
      background-color: rgba(255, 255, 255, 0.259);
      height: 0.1px;
    }


    .visible {
      background-color: white;
      border: none
    }



    .rotate-orbit {
      animation-name: rotation;
      animation-iteration-count: 10;
      animation-timing-function: linear;
    }

    .rotate-time-1 {
      animation-duration: 40s;
    }

    .rotate-time-2 {
      animation-duration: 30s;
    }

    .rotate-time-3 {
      animation-duration: 20s;
    }

    .rotate-time-4 {
      animation-duration: 10s;
    }

    .rotate-time-5 {
      animation-duration: 5s;
    }

    .invert {
      animation-direction: reverse;
    }

    @keyframes rotation {
      0% {
        rotate: 360deg;
      }

      100% {
        rotate: 0deg;
      }
    }

Codepen: link

Credits: This example is inspired on Pinterest

A watch

<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-text label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved" >ALARM 7:00AM</o-text> <o-text label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved digital-clock"></o-text> </div> <div class="orbit-11 from-160 range-40 "> <o-text flip text-anchor="middle" label-color="rgb(163,163,163)" class="demo-curved">500 • 30 • 12</o-text> </div> <div class="calendar orbit-12 shrink-80 from-215 range-30"> <o-text flip style="--bg-color: rgb(57,57,57); --o-text-color: rgb(163,163,163); " text-anchor="middle" class="gap-3 rounded previous grow-0.2x">22</o-text> <o-text flip style="color: white; --o-text-color: black; " text-anchor="middle" class="current gap-3 rounded grow-0.2x">23</o-text> <o-text flip style="--bg-color: rgb(57,57,57); --o-text-color: rgb(163,163,163); " text-anchor="middle" class="gap-3 rounded next grow-0.2x">24</o-text> </div> <div class="orbit-12 from-227 range-12 "> <o-text flip style="color: white;" text-anchor="middle" class="outer-orbit day-name"></o-text> </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-text label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved" >ALARM 7:00AM</o-text>
          <o-text label-color="rgb(163,163,163)" text-anchor="middle" class="demo-curved digital-clock"></o-text>
        </div>
        <div class="orbit-11 from-160 range-40 ">
          <o-text flip   text-anchor="middle" label-color="rgb(163,163,163)" class="demo-curved">500 • 30 • 12</o-text>
        </div>
        <div class="calendar orbit-12 shrink-80 from-215 range-30">
          <o-text flip style="--bg-color: rgb(57,57,57); --o-text-color: rgb(163,163,163); " text-anchor="middle"
            class="gap-3 rounded previous grow-0.2x">22</o-text>
          <o-text flip style="color: white;  --o-text-color: black; " text-anchor="middle" class="current gap-3 rounded grow-0.2x">23</o-text>
          <o-text flip style="--bg-color: rgb(57,57,57); --o-text-color: rgb(163,163,163); " text-anchor="middle"
            class="gap-3 rounded next grow-0.2x">24</o-text>
        </div>
        <div class="orbit-12 from-227 range-12 ">
          <o-text flip style="color: white;" text-anchor="middle" class="outer-orbit day-name"></o-text>
        </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.