Skip to content

Instantly share code, notes, and snippets.

@bkietz

bkietz/clock-60x.svg

Last active October 26, 2025 01:44
Show Gist options
  • Save bkietz/73d51409ca61119969af6abb28970362 to your computer and use it in GitHub Desktop.
Save bkietz/73d51409ca61119969af6abb28970362 to your computer and use it in GitHub Desktop.
Download ZIP
Vernier clock dial
Display the source blob
Display the rendered blob
Raw
clock-60x.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>
<defs>
<rect
id="notch25"
x="61"
y="13"
width="6"
height="10.5"
/>
<rect
id="notch24"
x="61"
y="4"
width="6"
height="10.5"
/>
</defs>
<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="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-24">
<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="animated">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 64 64"
to="360 64 64"
dur="1440s"
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-25">
<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(14.4 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(28.8 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(43.2 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(57.6 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(72 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(86.4 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(100.8 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(115.2 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(129.6 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(144 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(158.4 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(172.8 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(187.2 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(201.6 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(216 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(230.4 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(244.8 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(259.2 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(273.6 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(288 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(302.4 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(316.8 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(331.2 64 64)" />
<line x1="64" x2="64" y1="10" y2="25" transform="rotate(345.6 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="1000ms"
repeatCount="indefinite"
/>
<line x1="64" x2="64" y1="64" y2="32" stroke-width="1" stroke="red" />
</g>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
clock-double-notches.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
clock-octuple-notches.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
clock-quadruple-notches.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
clock.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment