autogenerating a clock with an optional slice taken out for time. The things I do on vacation ...

full-clock-autogen.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="128" width="128">
  <style>
#clock_background {
  fill: #333;
  stroke: none;
}
.pip {
  stroke-linecap: round;
  stroke: #bbb;
  stroke-width: 4;
}
.big_pip {
  stroke: #eee;
  stroke-width: 6;
}

  </style>
  <defs>
  </defs>
  <circle cx='64' cy='64' r='54' fill='#555' />
  <g id='clock' />
  <script>//<![CDATA[
let clockGroup = document.getElementById('clock');
let clockFace = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
clockFace.setAttribute('id', 'clock_face');
clockFace.setAttribute('cx', '64');
clockFace.setAttribute('cy', '64');
clockFace.setAttribute('r', '54');
clockFace.setAttribute('fill', '#333');
clockGroup.appendChild(clockFace);
let clockPips = document.createElementNS('http://www.w3.org/2000/svg', 'g');
clockPips.setAttribute('id', 'clock_pips');
let pipMetrics = {
  big: {
    offset: 22,
    length: 6
  },
  little: {
    offset: 24,
    length: 4
  }
};
pipMetrics.big.radius = 64 - pipMetrics.big.offset;
pipMetrics.little.radius = 64 - pipMetrics.little.offset;
for (var i = 0; i < 12; i++) {
  let isBigPip = (i % 3 == 0);
  let newPip = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  let theta = Math.PI / 6 * i;
  let {offset, length, radius} = isBigPip ? pipMetrics.big : pipMetrics.little;
  let start = { x: (1 + Math.sin(theta)) * radius + offset,
                y: (1 + Math.cos(theta)) * radius + offset };
  let translate = { x: Math.sin(theta) * length,
                    y: Math.cos(theta) * length };
  newPip.setAttribute('d', `M ${start.x} ${start.y} l ${translate.x} ${translate.y}`);
  newPip.setAttribute('class', `pip ${isBigPip ? "big_pip" : ""}`);
  clockPips.appendChild(newPip);
}
clockGroup.appendChild(clockPips);

function timeSlice(startTime, finalTime) {
  let radius = 54;
  let offset = 10;
  let [startTheta, finalTheta] = [startTime, finalTime].map((oclock) => oclock / 6 * Math.PI);
  let defs = document.getElementsByTagName('defs')[0];
  let clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
  clipPath.setAttribute('id', 'clock_clip');
  let start = {
    x: (1 + Math.sin(startTheta)) * (radius) + offset,
    y: (1 - Math.cos(startTheta)) * (radius) + offset,
  };
  let final = {
    x: (1 + Math.sin(finalTheta)) * (radius) + offset,
    y: (1 - Math.cos(finalTheta)) * (radius) + offset,
  };
  let slicePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  slicePath.setAttribute('id', 'clipped');
  slicePath.setAttribute('d',
    `M 64 64
     L ${start.x} ${start.y}
     A 54 54 0 1 0 ${final.x} ${final.y}
     L 64 64
     Z`);
  clipPath.appendChild(slicePath);
  defs.appendChild(clipPath);
  document.getElementById('clock').setAttribute('clip-path', 'url(#clock_clip)');
}

timeSlice(12, 2);
//]]>
  </script>
</svg>