Swiss Railway Clock

<div class="nuda-swiss" role="img" aria-label="Swiss railway clock">
  <div class="nuda-swiss__face">
    <!-- 12 hour ticks via loop -->
    <span class="nuda-swiss__h"
      style="transform: rotate(0deg) translateY(-66px)"></span>
    <!-- ...up to rotate(330deg)... -->
    <div class="nuda-swiss__hour"></div>
    <div class="nuda-swiss__min"></div>
    <div class="nuda-swiss__sec">
      <span class="nuda-swiss__secBar"></span>
      <span class="nuda-swiss__secDot"></span>
    </div>
    <div class="nuda-swiss__pivot"></div>
  </div>
</div>

/* Swiss Railway Clock
   Iconic Hans Hilfiker design. The seconds hand sweeps in 60 discrete
   steps with the red disc tip. */

.nuda-swiss {
  --bg: #fafafa;
  --ink: #09090b;
  --red: #ff5e7a;
  display: inline-block;
  padding: 10px;
  background: #0c0c10;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-swiss__face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 4px var(--ink);
}

.nuda-swiss__h {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 12px;
  margin-left: -2px;
  background: var(--ink);
  transform-origin: center 66px;
}

.nuda-swiss__hour,
.nuda-swiss__min {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: var(--ink);
  transform-origin: bottom center;
  border-radius: 2px;
}

.nuda-swiss__hour {
  width: 6px;
  height: 42px;
  margin-left: -3px;
}

.nuda-swiss__min {
  width: 4px;
  height: 62px;
  margin-left: -2px;
}

.nuda-swiss__sec {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0;
  transform-origin: bottom center;
  animation: nuda-swiss-sec 60s steps(60) infinite;
}

.nuda-swiss__secBar {
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 68px;
  background: var(--red);
}

.nuda-swiss__secDot {
  position: absolute;
  left: -7px;
  top: -72px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red);
}

.nuda-swiss__pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--red);
  z-index: 1;
}

@keyframes nuda-swiss-sec {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-swiss__sec { animation: none; }
}