Clocks

by Federico Tibaldo

HTML

<div class="clock wall-mount">
  <div class="hours ring"></div>
  <div class="quarters ring"></div>
</div>

CSS

:root {
  /* clock size */
  --diameter: 500px;
  /* ticks */
  --outer-radius: calc(var(--diameter) / 2);
  /* hours */
  --hour-tick: 30px;
  --hour-width: 1deg;
  --inner-hour-radius: calc(var(--outer-radius) - var(--hour-tick));
  /* quarters */
  --quarter-tick: 50px;
  --quarter-width: 2deg;
  --inner-quarter-radius: calc(var(--outer-radius) - var(--quarter-tick));
}

.clock {
  width: var(--diameter);
  height: var(--diameter);
  margin: auto;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
}

.clock.wall-mount {
  --hard-shadow: calc(var(--diameter) / 50);
  --ambient-shadow: calc(var(--diameter) / 20);
  box-shadow:
      0 var(--hard-shadow) var(--hard-shadow) rgba(0,0,0,.2),
      calc(var(--ambient-shadow) / 2) var(--ambient-shadow) var(--ambient-shadow) rgba(0,0,0,.1)
  ;
}

.clock .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hours {
  --width: var(--hour-width);
  --frequency: calc(360deg / 12);
  --inner-radius: var(--inner-hour-radius);
}
.quarters {
  --width: var(--quarter-width);
  --frequency: calc(360deg / 4);
  --inner-radius: var(--inner-quarter-radius);
}

.ring {
  /* for slicker rendering! */
  --blur-width: calc(var(--width) / 10);
  /* useful shorthand */
  --half-width: calc(var(--width) / 2);
  /* precalculate here to avoid an unreadable mess later on */
  --pre-tick-start: calc(var(--half-width) + var(--blur-width));
  --pre-tick-end: calc(var(--frequency) - var(--half-width) - var(--blur-width));
  --tick-start: calc(var(--frequency) - var(--half-width) + var(--blur-width));
  --tick-end: calc(var(--frequency) + var(--half-width) - var(--blur-width));
  --post-tick: calc(var(--frequency) + var(--half-width) + var(--blur-width));
  background-image:
      radial-gradient(
          white 0 var(--inner-radius),
          transparent var(--inner-radius) var(--outer-radius),
          white var(--outer-radius)
      ),
      repeating-conic-gradient(
          transparent...