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.