Vernier clock dial

clock-60x.svg

clock-double-notches.svg

<svg
  width="2048"
  height="2048"
  viewBox="0 0 128 128"
  xmlns="http://www.w3.org/2000/svg"
>
  <script>
    const svg = document.querySelector("svg")
    try {
      window.onresize = ()=> {
        svg.width.baseVal.value = svg.clientWidth
        svg.height.baseVal.value = svg.clientHeight
      }
      window.onresize()
    } catch (_) {}

    const now = new Date()
    svg.setCurrentTime(now.getSeconds() + (now.getMinutes() + now.getHours() * 60) * 60)
  </script>

  <style>
    text {
      font: bold 4px sans-serif;
      text-anchor: middle;
    }
    line {
      stroke: black;
      stroke-width: 0.5px;
    }
  </style>

  <circle
    cx="64"
    cy="64"
    r="64"
    fill="white"
    stroke="black"
    stroke-width="0.5"
  />

  <circle
    cx="64"
    cy="64"
    r="39"
    fill="none"
    stroke="black"
    stroke-width="1.5"
  />

  <g id="hour-notches">
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(0 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(15 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(30 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(45 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(60 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(75 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(90 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(105 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(120 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(135 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(150 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(165 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(180 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(195 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(210 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(225 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(240 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(255 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(270 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(285 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(300 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(315 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(330 64 64)" />
  <line x1="64" x2="64" y1="6" y2="25" transform="rotate(345 64 64)" />
  </g>

  <g id="hours">
  <text x="64" y="4" transform="rotate(0 64 64)">0</text>
  <text x="64" y="4" transform="rotate(15 64 64)">1</text>
  <text x="64" y="4" transform="rotate(30 64 64)">2</text>
  <text x="64" y="4" transform="rotate(45 64 64)">3</text>
  <text x="64" y="4" transform="rotate(60 64 64)">4</text>
  <text x="64" y="4" transform="rotate(75 64 64)">5</text>
  <text x="64" y="4" transform="rotate(90 64 64)">6</text>
  <text x="64" y="4" transform="rotate(105 64 64)">7</text>
  <text x="64" y="4" transform="rotate(120 64 64)">8</text>
  <text x="64" y="4" transform="rotate(135 64 64)">9</text>
  <text x="64" y="4" transform="rotate(150 64 64)">10</text>
  <text x="64" y="4" transform="rotate(165 64 64)">11</text>
  <text x="64" y="4" transform="rotate(180 64 64)">12</text>
  <text x="64" y="4" transform="rotate(195 64 64)">13</text>
  <text x="64" y="4" transform="rotate(210 64 64)">14</text>
  <text x="64" y="4" transform="rotate(225 64 64)">15</text>
  <text x="64" y="4" transform="rotate(240 64 64)">16</text>
  <text x="64" y="4" transform="rotate(255 64 64)">17</text>
  <text x="64" y="4" transform="rotate(270 64 64)">18</text>
  <text x="64" y="4" transform="rotate(285 64 64)">19</text>
  <text x="64" y="4" transform="rotate(300 64 64)">20</text>
  <text x="64" y="4" transform="rotate(315 64 64)">21</text>
  <text x="64" y="4" transform="rotate(330 64 64)">22</text>
  <text x="64" y="4" transform="rotate(345 64 64)">23</text>
  </g>

  <g id="vernier-48">
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(0 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(7.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(15 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(22.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(30 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(37.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(45 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(52.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(60 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(67.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(75 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(82.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(90 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(97.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(105 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(112.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(120 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(127.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(135 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(142.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(150 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(157.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(165 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(172.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(180 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(187.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(195 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(202.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(210 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(217.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(225 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(232.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(240 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(247.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(255 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(262.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(270 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(277.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(285 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(292.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(300 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(307.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(315 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(322.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(330 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(337.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(345 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(352.5 64 64)" />
  </g>

  <g id="animated">

  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 64 64"
    to="360 64 64"
    dur="24h"
    repeatCount="indefinite"
  />
  <line x1="64" x2="64" y1="64" y2="6" stroke-width="1" stroke="red" />
  <circle
    cx="64"
    cy="3"
    r="3"
    fill="none"
    stroke="black"
    stroke-width="0.5"
  />

  <g id="vernier-49">
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(0 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(7.346938775510204 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(14.693877551020408 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(22.040816326530614 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(29.387755102040817 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(36.734693877551024 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(44.08163265306123 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(51.42857142857143 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(58.775510204081634 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(66.12244897959184 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(73.46938775510205 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(80.81632653061224 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(88.16326530612245 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(95.51020408163265 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(102.85714285714286 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(110.20408163265306 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(117.55102040816327 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(124.89795918367346 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(132.24489795918367 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(139.59183673469389 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(146.9387755102041 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(154.28571428571428 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(161.6326530612245 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(168.9795918367347 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(176.3265306122449 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(183.6734693877551 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(191.0204081632653 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(198.3673469387755 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(205.71428571428572 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(213.0612244897959 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(220.40816326530611 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(227.75510204081633 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(235.10204081632654 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(242.44897959183675 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(249.79591836734693 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(257.14285714285717 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(264.48979591836735 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(271.83673469387753 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(279.18367346938777 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(286.53061224489795 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(293.8775510204082 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(301.2244897959184 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(308.57142857142856 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(315.9183673469388 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(323.265306122449 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(330.61224489795916 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(337.9591836734694 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(345.3061224489796 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(352.6530612244898 64 64)" />
  </g>

  <g id="minute-notches">
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(0 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(6 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(12 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(18 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(24 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(30 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(36 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(42 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(48 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(54 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(60 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(66 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(72 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(78 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(84 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(90 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(96 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(102 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(108 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(114 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(120 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(126 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(132 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(138 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(144 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(150 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(156 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(162 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(168 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(174 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(180 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(186 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(192 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(198 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(204 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(210 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(216 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(222 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(228 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(234 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(240 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(246 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(252 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(258 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(264 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(270 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(276 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(282 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(288 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(294 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(300 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(306 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(312 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(318 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(324 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(330 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(336 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(342 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(348 64 64)" />
  <line x1="64" x2="64" y1="25" y2="28" transform="rotate(354 64 64)" />
  </g>

  <g id="minutes">
  <text x="64" y="32" transform="rotate(30 64 64)">5</text>
  <text x="64" y="32" transform="rotate(60 64 64)">10</text>
  <text x="64" y="32" transform="rotate(90 64 64)">15</text>
  <text x="64" y="32" transform="rotate(120 64 64)">20</text>
  <text x="64" y="32" transform="rotate(150 64 64)">25</text>
  <text x="64" y="32" transform="rotate(180 64 64)">30</text>
  <text x="64" y="32" transform="rotate(210 64 64)">35</text>
  <text x="64" y="32" transform="rotate(240 64 64)">40</text>
  <text x="64" y="32" transform="rotate(270 64 64)">45</text>
  <text x="64" y="32" transform="rotate(300 64 64)">50</text>
  <text x="64" y="32" transform="rotate(330 64 64)">55</text>
  </g>

  <g id="animated-seconds">

    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 64 64"
      to="360 64 64"
      dur="60s"
      repeatCount="indefinite"
    />
    <line x1="64" x2="64" y1="64" y2="32" stroke-width="1" stroke="red" />
  </g>
  </g>

</svg>

clock-octuple-notches.svg

clock-quadruple-notches.svg

clock.svg

generate.js

let svg = `\
<svg
  width="2048"
  height="2048"
  viewBox="0 0 128 128"
  xmlns="http://www.w3.org/2000/svg"
>
  <script>
    const svg = document.querySelector("svg")
    try {
      window.onresize = ()=> {
        svg.width.baseVal.value = svg.clientWidth
        svg.height.baseVal.value = svg.clientHeight
      }
      window.onresize()
    } catch (_) {}

    const now = new Date()
    svg.setCurrentTime(now.getSeconds() + (now.getMinutes() + now.getHours() * 60) * 60)
  </script>

  <style>
    text {
      font: bold 4px sans-serif;
      text-anchor: middle;
    }
    line {
      stroke: black;
      stroke-width: 0.5px;
    }
  </style>

  <circle
    cx="64"
    cy="64"
    r="64"
    fill="white"
    stroke="black"
    stroke-width="0.5"
  />

  <circle
    cx="64"
    cy="64"
    r="39"
    fill="none"
    stroke="black"
    stroke-width="1.5"
  />
`

function g(id, writeLines) {
  svg += `\n  <g id="${id}">\n`
  writeLines()
  svg += `  </g>\n`
}

function notches(id, count, y1, y2) {
  g(id, () => {
    for (let i = 0; i < count; ++i) {
      const angle = 360 * i / count
      svg += `  <line x1="64" x2="64" y1="${y1}" y2="${y2}" transform="rotate(${angle} 64 64)" />\n`
    }
  })
}

notches("hour-notches", 24, 6, 25)
g("hours", () => {
  for (let hour = 0; hour < 24; ++hour) {
    const angle = 360 * hour / 24
    svg += `  <text x="64" y="4" transform="rotate(${angle} 64 64)">${hour}</text>\n`
  }
})

notches("vernier-48", 48, 10, 25)

const timeFactor = 1

g("animated", () => {
  svg += `
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 64 64"
    to="360 64 64"
    dur="${timeFactor === 1 ? "24h" : `${Math.round(24 * 60 * 60 / timeFactor)}s`}"
    repeatCount="indefinite"
  />
  <line x1="64" x2="64" y1="64" y2="6" stroke-width="1" stroke="red" />
  <circle
    cx="64"
    cy="3"
    r="3"
    fill="none"
    stroke="black"
    stroke-width="0.5"
  />
`

  notches("vernier-49", 49, 10, 25)

  notches("minute-notches", 60, 25, 28)
  g(`minutes`, () => {
    for (let minute = 0; minute < 60; minute += 5) {
      if (minute != 0) {
        const angle = 360 * minute / 60
        svg += `  <text x="64" y="32" transform="rotate(${angle} 64 64)">${minute}</text>\n`
      }
    }
  })

  g("animated-seconds", () => {
    svg += `
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 64 64"
      to="360 64 64"
      dur="${timeFactor === 1 ? "60s" : `${Math.round(60_000 / timeFactor)}ms`}"
      repeatCount="indefinite"
    />
    <line x1="64" x2="64" y1="64" y2="32" stroke-width="1" stroke="red" />
`
  })
})

svg += `
</svg>
`

console.log(svg)