Skip to content
Orbit CSS Radial Framework

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);
    }

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;
      }
    }

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)

Credits: This example is inspired on Amazfitwatchfaces

The Solar System

<!-- Visit https://github.com/zumerlab/orbit --> <div class="bigbang"> <div class="gravity-spot from-3x"> <div class="orbit-0"> <div class="satellite sun grow-3x"> </div> </div> <div class="orbit-1"> <div class="satellite mercury shrink-60"> <div class="capsule"> <div class="surface"></div> </div> </div> </div> <div class="orbit-2"> <div class="satellite venus shrink-10"> <div class="capsule"> <div class="surface"></div> </div> </div> </div> <div class="orbit-3"> <div class="satellite earth"> <div class="capsule "> <div class="surface"></div> </div> <div class="gravity-spot"> <div class="orbit-1 shrink-30 " style="border:none; transform: rotateX(45deg);"> <div class="satellite shrink-70 moon"></div> </div> </div> </div> </div> <div class="orbit-4"> <div class="satellite mars shrink-40"> <div class="capsule"> <div class="surface"></div> </div> <div class="gravity-spot"> <div class="orbit-1 shrink-30 range-270" style="border:none; transform: rotateX(45deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> </div> </div> </div> <div class="orbit-6 asteroid-belt"> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> </div> <div class="orbit-6 from-20 shrink-20 asteroid-belt"> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-70"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-70"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-80"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> </div> <div class="orbit-6 from-40 shrink-40 asteroid-belt"> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-70"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-80"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> </div> <div class="orbit-6 from-10 shrink-60 asteroid-belt"> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-80"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-70"></div> <div class="satellite shrink-90"></div> <div class="satellite shrink-90"></div> </div> <div class="orbit-8"> <div class="satellite jupiter grow-0.9x"> <div class="capsule"> <div class="surface"></div> </div> <div class="gravity-spot"> <div class="orbit-1 shrink-10 " style="border:none; transform: rotateX(35deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> <div class="orbit-1 shrink-10 " style="border:none; transform: rotateX(45deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> <div class="orbit-2 shrink-90 " style="border:none; rotate: 55deg;"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> </div> </div> </div> <div class="orbit-10"> <div class="satellite saturn grow-0.3x"> <div class="gravity-spot ring"> <div class="orbit-2 shrink-80" style=" border:3px solid rgba(255,255,255,0.2); "></div> <div class="orbit-2 shrink-90" style=" border:1px solid rgba(255,255,255,0.2); "></div> <div class="orbit-1" style=" border:3px solid rgba(255,255,255,0.4); "></div> </div> <div class="gravity-spot"> <div class="orbit-2 shrink-80 " style="border:none; transform: rotateX(45deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> </div> <div class="capsule"> <div class="surface"></div> </div> </div> </div> <div class="orbit-12"> <div class="satellite uranus grow-0.1x"> <div class="capsule"> <div class="surface"></div> </div> <div class="gravity-spot"> <div class="orbit-1 shrink-10 " style="border:none; transform: rotateX(35deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> <div class="orbit-1 shrink-20 " style="transform: rotateX(45deg);border:none;"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> </div> </div> </div> <div class="orbit-14"> <div class="satellite neptune grow-0.1x"> <div class="gravity-spot ring"> <div class="orbit-1 shrink-30" style=" border:1px solid white; "></div> </div> <div class="capsule"> <div class="surface"></div> </div> <div class="gravity-spot"> <div class="orbit-1 shrink-10 " style="border:none; transform: rotateX(35deg);"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> <div class="orbit-1 shrink-20 " style="border:none; rotate: 45deg;"> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> <div class="satellite shrink-90 moon"></div> </div> </div> </div> </div> </div> </div>
body {
  background-color: black !important;;
}

[class*="orbit-"] {
  border: 1px dashed rgba(255, 255, 255, 0.2);
}
.sun:before,
.surface:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0px,
    yellow,
    rgba(255, 255, 255, 0) 58%
  );
  -webkit-filter: blur(5px);
  z-index: 2;
}
.sun:after,
.surface:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(245, 237, 48, 0),
    rgba(200, 190, 20, 0.2) 50%,
    #575300 100%
  );
}

.asteroid-belt {
  border: 10px solid rgba(255, 255, 255, 0.01);
}

.bigbang {
 perspective: 150px;
  perspective-origin: 50% 100%;
  
}
.gravity-spot {
  transform: rotateX(10deg);
   transform-style: preserve-3d;
}

.orbit-0 {
  border: none;
  transform: rotateX(-5deg);
}
.asteroid-belt {
  animation: rotate var(--t, 80s) linear reverse infinite;
}
.asteroid-belt > .satellite {
  background-color: hsl(0, 0%, 50%);
}

.sun {
  box-shadow: 0px 0px 24px 3px rgba(255, 245, 46, 0.55);
  background: url("https://soho.nascom.nasa.gov/data/LATEST/current_eit_284small.gif");
  background-size: auto 100%;
  --o-transform: rotate(0deg) rotateX(15deg) !important;
}

.satellite {
  border: none;
}
.capsule {
  animation: rotate var(--t, 20s) linear infinite;
}
.surface {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.mercury {
  --t: 2105.26ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.mercury .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/mercury-map.jpg");
  background-size: auto 100%;
}
.venus {
  --t: 4210.53ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.venus .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/venus-map.jpg");
  background-size: auto 100%;
}

.earth {
  --t: 6315.79ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.earth .surface {
  background: url("https://media.tenor.com/0we9sWcmUtYAAAAi/wingedratsecrettag-earth.gif");
  background-size: auto 100%;
}
.earth .moon {
  background-color: white;
  animation: rotate 10s reverse linear infinite;
}
.moon {
  background-color: white;
  opacity: 0.5;
  animation: rotate 10s reverse linear infinite;
}
.mars {
  --t: 8421.05ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.mars .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/mars-map.jpg");
  background-size: auto 100%;
}
.jupiter {
  --t: 12631.58ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.jupiter .surface {
  background: url("https://media1.tenor.com/m/9OygS0jeB6oAAAAd/nasa-nasa-gifs.gif");
  background-size: auto 100%;
}
.saturn {
  --t: 14736.84ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.saturn .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/saturn-map.jpg");
  background-size: auto 100%;
}
.saturn .ring {
  rotate: 15deg;
  transform: rotateX(75deg);
  animation: rotate var(--t, 20s) linear infinite;
}
.uranus {
  --t: 10526.32ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.uranus .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/uranus-map.jpg");
  background-size: auto 100%;
}
.neptune {
  --t: 20000ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}
.neptune .surface {
  background: url("https://raw.githubusercontent.com/cookieMonsterDev/solar-system-threejs/master/public/assets/neptune-map.jpg");
  background-size: auto 100%;
}
.neptune .ring {
  rotate: 85deg;
  transform: rotateX(75deg);
  animation: rotate var(--t, 20s) linear infinite;
}

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

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)

Show & Tell

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