Vernier clock dial

clock-60x.svg

clock-double-notches.svg

clock-octuple-notches.svg

clock-quadruple-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-96">
  <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(3.75 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(11.25 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(18.75 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(26.25 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(33.75 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(41.25 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(48.75 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(56.25 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(63.75 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(71.25 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(78.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(86.25 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(93.75 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(101.25 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(108.75 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(116.25 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(123.75 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(131.25 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(138.75 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(146.25 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(153.75 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(161.25 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(168.75 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(176.25 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(183.75 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(191.25 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(198.75 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(206.25 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(213.75 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(221.25 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(228.75 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(236.25 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(243.75 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(251.25 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(258.75 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(266.25 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(273.75 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(281.25 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(288.75 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(296.25 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(303.75 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(311.25 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(318.75 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(326.25 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(333.75 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(341.25 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(348.75 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(352.5 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(356.25 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-97">
  <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(3.711340206185567 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(7.422680412371134 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(11.1340206185567 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(14.845360824742269 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(18.556701030927837 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(22.2680412371134 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(25.97938144329897 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(29.690721649484537 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(33.402061855670105 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(37.11340206185567 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(40.824742268041234 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(44.5360824742268 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(48.24742268041237 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(51.95876288659794 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(55.670103092783506 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(59.381443298969074 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(63.09278350515464 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(66.80412371134021 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(70.51546391752578 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(74.22680412371135 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(77.9381443298969 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(81.64948453608247 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(85.36082474226804 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(89.0721649484536 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(92.78350515463917 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(96.49484536082474 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(100.20618556701031 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(103.91752577319588 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(107.62886597938144 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(111.34020618556701 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(115.05154639175258 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(118.76288659793815 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(122.47422680412372 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(126.18556701030928 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(129.89690721649484 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(133.60824742268042 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(137.31958762886597 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(141.03092783505156 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(144.7422680412371 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(148.4536082474227 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(152.16494845360825 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(155.8762886597938 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(159.58762886597938 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(163.29896907216494 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(167.01030927835052 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(170.72164948453607 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(174.43298969072166 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(178.1443298969072 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(181.8556701030928 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(185.56701030927834 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(189.27835051546393 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(192.98969072164948 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(196.70103092783506 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(200.41237113402062 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(204.1237113402062 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(207.83505154639175 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(211.5463917525773 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(215.2577319587629 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(218.96907216494844 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(222.68041237113403 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(226.39175257731958 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(230.10309278350516 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(233.81443298969072 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(237.5257731958763 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(241.23711340206185 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(244.94845360824743 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(248.659793814433 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(252.37113402061857 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(256.08247422680415 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(259.7938144329897 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(263.50515463917526 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(267.21649484536084 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(270.92783505154637 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(274.63917525773195 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(278.35051546391753 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(282.0618556701031 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(285.77319587628864 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(289.4845360824742 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(293.1958762886598 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(296.9072164948454 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(300.6185567010309 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(304.3298969072165 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(308.0412371134021 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(311.7525773195876 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(315.4639175257732 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(319.17525773195877 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(322.88659793814435 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(326.5979381443299 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(330.30927835051546 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(334.02061855670104 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(337.7319587628866 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(341.44329896907215 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(345.1546391752577 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(348.8659793814433 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(352.5773195876289 64 64)" />
  <line x1="64" x2="64" y1="10" y2="25" transform="rotate(356.2886597938144 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.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)