Digital Thrive

1.clock-face time {2  --_r: calc((var(--_w) - var(--_sz)) / 2);3  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));4  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));5  position: absolute;6  left: var(--_x);7  top: var(--_y);8}

1@keyframes turn {2  to {3    transform: rotate(1turn);4  }5}6 7.seconds {8  animation: turn 60s linear infinite;9}10 11.minutes {12  animation: turn 3600s steps(60, end) infinite;13}14 15.hours {16  animation: turn 43200s linear infinite;17}

1const time = new Date();2const hour = -3600 * (time.getHours() % 12);3const mins = -60 * time.getMinutes();4app.style.setProperty('--_dm', `${mins}s`);5app.style.setProperty('--_dh', `${(hour + mins)}s`);

1@property --seconds {2  syntax: "<integer>";3  initial-value: 0;4  inherits: false;5}6 7@keyframes tick-seconds {8  from { --seconds: 0; }9  to { --seconds: 60; }10}11 12.clock-seconds::after {13  content: counter(seconds);14  counter-reset: seconds var(--seconds);15}

1@supports not (left: calc(1px * cos(45deg))) {2  time {3    left: 50% !important;4    top: 50% !important;5    transform: translate(-50%, -50%)6      rotate(var(--_d))7      translate(var(--_r))8      rotate(calc(-1 * var(--_d)));9  }10}