Smartwatch Ticking Face

<div class="hln-watch-tick" role="img" aria-label="A smartwatch with a ticking hand">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(3.5 -19) scale(1.15)">
      <g><polygon points="3.76,2 3.84,1.59 4.08,1.19 4.47,0.82 5,0.5 26,-10 26.64,-10.26 27.38,-10.46 28.17,-10.58 29,-10.62 29.83,-10.58 30.62,-10.46 31.36,-10.26 32,-10 48,-2 48.53,-1.68 48.92,-1.31 49.16,-0.91 49.24,-0.5 49.24,1.5 49.16,1.91 48.92,2.31 48.53,2.68 48,3 27,13.5 26.36,13.76 25.62,13.96 24.83,14.08 24,14.12 23.17,14.08 22.38,13.96 21.64,13.76 21,13.5 5,5.5 4.47,5.18 4.08,4.81 3.84,4.41 3.76,4"/><polygon points="48,-2 48.53,-1.68 48.92,-1.31 49.16,-0.91 49.24,-0.5 49.16,-0.09 48.92,0.31 48.53,0.68 48,1 27,11.5 26.36,11.76 25.62,11.96 24.83,12.08 24,12.12 23.17,12.08 22.38,11.96 21.64,11.76 21,11.5 5,3.5 4.47,3.18 4.08,2.81 3.84,2.41 3.76,2 3.84,1.59 4.08,1.19 4.47,0.82 5,0.5 26,-10 26.64,-10.26 27.38,-10.46 28.17,-10.58 29,-10.62 29.83,-10.58 30.62,-10.46 31.36,-10.26 32,-10"/></g>
      <line class="hln-watch-tick-l" x1="29" y1="-7.5" x2="43" y2="-0.5"/>
      <line class="hln-watch-tick-l" x1="25" y1="-5.5" x2="39" y2="1.5"/>
      <line class="hln-watch-tick-l" x1="21" y1="-3.5" x2="35" y2="3.5"/>
      <line class="hln-watch-tick-l" x1="17" y1="-1.5" x2="31" y2="5.5"/>
      <g><polygon points="-33.31,12 -33.1,10.9 -32.45,9.84 -31.41,8.86 -30,8 -8,-3 -6.29,-3.7 -4.33,-4.23 -2.21,-4.55 0,-4.66 2.21,-4.55 4.33,-4.23 6.29,-3.7 8,-3 24,5 25.41,5.86 26.45,6.84 27.1,7.9 27.31,9 27.31,16 27.1,17.1 26.45,18.16 25.41,19.14 24,20 2,31 0.29,31.7 -1.67,32.23 -3.79,32.55 -6,32.66 -8.21,32.55 -10.33,32.23 -12.29,31.7 -14,31 -30,23 -31.41,22.14 -32.45,21.16 -33.1,20.1 -33.31,19"/><polygon points="24,5 25.41,5.86 26.45,6.84 27.1,7.9 27.31,9 27.1,10.1 26.45,11.16 25.41,12.14 24,13 2,24 0.29,24.7 -1.67,25.23 -3.79,25.55 -6,25.66 -8.21,25.55 -10.33,25.23 -12.29,24.7 -14,24 -30,16 -31.41,15.14 -32.45,14.16 -33.1,13.1 -33.31,12 -33.1,10.9 -32.45,9.84 -31.41,8.86 -30,8 -8,-3 -6.29,-3.7 -4.33,-4.23 -2.21,-4.55 0,-4.66 2.21,-4.55 4.33,-4.23 6.29,-3.7 8,-3"/></g>
      <g><polygon points="17.8,18.7 17.83,18.3 17.93,17.88 18.09,17.45 18.31,17.03 18.59,16.62 18.9,16.24 19.25,15.91 19.62,15.62 20,15.4 20.38,15.24 20.75,15.16 21.1,15.14 21.41,15.21 21.69,15.34 24.69,16.84 24.91,17.05 25.07,17.31 25.17,17.63 25.2,18 25.17,18.4 25.07,18.82 24.91,19.25 24.69,19.67 24.41,20.08 24.1,20.46 23.75,20.79 23.38,21.08 23,21.3 22.62,21.46 22.25,21.54 21.9,21.56 21.59,21.49 21.31,21.36 18.31,19.86 18.09,19.65 17.93,19.39 17.83,19.07"/><polygon points="20.8,20.2 20.83,19.8 20.93,19.38 21.09,18.95 21.31,18.53 21.59,18.12 21.9,17.74 22.25,17.41 22.62,17.12 23,16.9 23.38,16.74 23.75,16.66 24.1,16.64 24.41,16.71 24.69,16.84 24.91,17.05 25.07,17.31 25.17,17.63 25.2,18 25.17,18.4 25.07,18.82 24.91,19.25 24.69,19.67 24.41,20.08 24.1,20.46 23.75,20.79 23.38,21.08 23,21.3 22.62,21.46 22.25,21.54 21.9,21.56 21.59,21.49 21.31,21.36 21.09,21.15 20.93,20.89 20.83,20.57"/></g>
      <g><polygon points="-55.24,31.5 -55.16,31.09 -54.92,30.69 -54.53,30.32 -54,30 -33,19.5 -32.36,19.24 -31.62,19.04 -30.83,18.92 -30,18.88 -29.17,18.92 -28.38,19.04 -27.64,19.24 -27,19.5 -11,27.5 -10.47,27.82 -10.08,28.19 -9.84,28.59 -9.76,29 -9.76,31 -9.84,31.41 -10.08,31.81 -10.47,32.18 -11,32.5 -32,43 -32.64,43.26 -33.38,43.46 -34.17,43.58 -35,43.62 -35.83,43.58 -36.62,43.46 -37.36,43.26 -38,43 -54,35 -54.53,34.68 -54.92,34.31 -55.16,33.91 -55.24,33.5"/><polygon points="-11,27.5 -10.47,27.82 -10.08,28.19 -9.84,28.59 -9.76,29 -9.84,29.41 -10.08,29.81 -10.47,30.18 -11,30.5 -32,41 -32.64,41.26 -33.38,41.46 -34.17,41.58 -35,41.62 -35.83,41.58 -36.62,41.46 -37.36,41.26 -38,41 -54,33 -54.53,32.68 -54.92,32.31 -55.16,31.91 -55.24,31.5 -55.16,31.09 -54.92,30.69 -54.53,30.32 -54,30 -33,19.5 -32.36,19.24 -31.62,19.04 -30.83,18.92 -30,18.88 -29.17,18.92 -28.38,19.04 -27.64,19.24 -27,19.5"/></g>
      <polygon class="hln-watch-tick-l" points="-36,32 -35.65,32.21 -35.39,32.46 -35.23,32.72 -35.17,33 -35.23,33.28 -35.39,33.54 -35.65,33.79 -36,34 -38,35 -38.43,35.18 -38.92,35.31 -39.45,35.39 -40,35.41 -40.55,35.39 -41.08,35.31 -41.57,35.18 -42,35 -42,35 -42.35,34.79 -42.61,34.54 -42.77,34.28 -42.83,34 -42.77,33.72 -42.61,33.46 -42.35,33.21 -42,33 -40,32 -39.57,31.82 -39.08,31.69 -38.55,31.61 -38,31.59 -37.45,31.61 -36.92,31.69 -36.43,31.82 -36,32"/>
      <polygon class="hln-watch-tick-l" points="20,6 21.06,6.64 21.84,7.38 22.32,8.17 22.49,9 22.32,9.83 21.84,10.62 21.06,11.36 20,12 0,22 -1.29,22.53 -2.75,22.92 -4.34,23.16 -6,23.24 -7.66,23.16 -9.25,22.92 -10.71,22.53 -12,22 -26,15 -27.06,14.36 -27.84,13.62 -28.32,12.83 -28.49,12 -28.32,11.17 -27.84,10.38 -27.06,9.64 -26,9 -6,-1 -4.71,-1.53 -3.25,-1.92 -1.66,-2.16 0,-2.24 1.66,-2.16 3.25,-1.92 4.71,-1.53 6,-1"/>
      <g transform="matrix(1 .5 -1 .5 -3 10.5)"><line x1="8.6" y1="0" x2="10.8" y2="0"/><line class="hln-watch-tick-l" x1="8.31" y1="4.8" x2="9.35" y2="5.4"/><line class="hln-watch-tick-l" x1="4.8" y1="8.31" x2="5.4" y2="9.35"/><line x1="0" y1="8.6" x2="0" y2="10.8"/><line class="hln-watch-tick-l" x1="-4.8" y1="8.31" x2="-5.4" y2="9.35"/><line class="hln-watch-tick-l" x1="-8.31" y1="4.8" x2="-9.35" y2="5.4"/><line x1="-8.6" y1="0" x2="-10.8" y2="0"/><line class="hln-watch-tick-l" x1="-8.31" y1="-4.8" x2="-9.35" y2="-5.4"/><line class="hln-watch-tick-l" x1="-4.8" y1="-8.31" x2="-5.4" y2="-9.35"/><line x1="0" y1="-8.6" x2="0" y2="-10.8"/><line class="hln-watch-tick-l" x1="4.8" y1="-8.31" x2="5.4" y2="-9.35"/><line class="hln-watch-tick-l" x1="8.31" y1="-4.8" x2="9.35" y2="-5.4"/><g class="hln-watch-tick-hand"><line class="hln-watch-tick-a" x1="0" y1="1.8" x2="0" y2="-8.6"/></g><circle cx="0" cy="0" r="1.2"/><line class="hln-watch-tick-l" x1="-5" y1="5.5" x2="5" y2="5.5"/></g>
    </g>
  </svg>
</div>

.hln-watch-tick {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
}
.hln-watch-tick svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-watch-tick svg * {
  vector-effect: non-scaling-stroke;
}
.hln-watch-tick .hln-watch-tick-l {
  stroke: #9a9ca3;
}
.hln-watch-tick .hln-watch-tick-a {
  stroke: var(--c);
}
.hln-watch-tick .hln-watch-tick-hand {
  animation: hln-watch-tick-tick 6s infinite;
}
@keyframes hln-watch-tick-tick {
  0% { transform: rotate(0deg); }
  1.67% { transform: rotate(0deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  8% { transform: rotate(30deg); }
  10% { transform: rotate(30deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  16.33% { transform: rotate(60deg); }
  18.33% { transform: rotate(60deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  24.67% { transform: rotate(90deg); }
  26.67% { transform: rotate(90deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  33% { transform: rotate(120deg); }
  35% { transform: rotate(120deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  41.33% { transform: rotate(150deg); }
  43.33% { transform: rotate(150deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  49.67% { transform: rotate(180deg); }
  51.67% { transform: rotate(180deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  58% { transform: rotate(210deg); }
  60% { transform: rotate(210deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  66.33% { transform: rotate(240deg); }
  68.33% { transform: rotate(240deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  74.67% { transform: rotate(270deg); }
  76.67% { transform: rotate(270deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  83% { transform: rotate(300deg); }
  85% { transform: rotate(300deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  91.33% { transform: rotate(330deg); }
  93.33% { transform: rotate(330deg); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  99.67% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-watch-tick * {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-watch-tick, .hln-watch-tick *, .hln-watch-tick::before, .hln-watch-tick::after, .hln-watch-tick *::before, .hln-watch-tick *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hairline animations