Tick Marks Face

<div class="nuda-ticks" role="img" aria-label="Watch face with 60 tick marks">
  <div class="nuda-ticks__face">
    <!-- Repeat 60 times, every 5th gets nuda-ticks__t--major -->
    <span class="nuda-ticks__t nuda-ticks__t--major"
      style="transform: rotate(0deg) translateY(-72px)"></span>
    <span class="nuda-ticks__t"
      style="transform: rotate(6deg) translateY(-72px)"></span>
    <!-- ...up to rotate(354deg)... -->
    <div class="nuda-ticks__dot"></div>
  </div>
</div>

/* Tick Marks Face
   60 minute marks; every 5th is a major hour tick.
   Generate via a CSS preprocessor or template loop. */

.nuda-ticks {
  --bg: #0c0c10;
  --accent: #e4ff54;
  display: inline-block;
  padding: 14px;
  background: var(--bg);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-ticks__face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #111114, #09090b);
}

.nuda-ticks__t {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 6px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.25);
  transform-origin: center 72px;
}

.nuda-ticks__t--major {
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(228, 255, 84, 0.4);
}

.nuda-ticks__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  animation: nuda-ticks-pulse 2s ease-in-out infinite;
}

@keyframes nuda-ticks-pulse {
  50% { transform: scale(1.4); opacity: 0.6; }
}

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