Skip to content

Instantly share code, notes, and snippets.

@allenhwkim
Last active Jul 22, 2021
Embed
What would you like to do?
Clock SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 220 220">
<style>
text { font-family: Courier New; font-weight: bold; user-select: none;}
</style>
<g transform="translate(110,110)">
<!-- tick -->
<g>
<circle r="108" class="x-clock-circle" fill="none" stroke-width="4" stroke="gray" />
<circle r="97" class="x-clock-1-minute" fill="none" stroke-width="11" stroke="black"
stroke-dasharray="4 46.789082" transform="rotate(-1.5)" />
<circle r="100" class="x-clock-5-minute" fill="none" stroke-width="5" stroke="black"
stroke-dasharray="2 8.471976" transform="rotate(-.873)" />
</g>
<!-- hands -->
<g id="hands" transform="rotate(180)">
<circle class="x-clock-center" r="7" fill="#333" />
<g id="hour-hand" tabindex="0">
<line class="x-clock-hour-hand" stroke-width="5" y2="70" stroke-linecap="round" stroke="#333" />
</g>
<g id="minute-hand" tabindex="0">
<line class="x-clock-minute-hand" stroke-width="5" y2="85" stroke-linecap="round" stroke="#666" />
</g>
<g id="second-hand">
<line class="x-clock-second-hand" stroke-width="2" y2="95" stroke="#999" />
</g>
</g>
<!-- numbers -->
<g id="numbers" class="x-clock-numbers">
<text x="35" y="-65">1</text>
<text x="65" y="-35">2</text>
<text x="75" y="5">3</text>
<text x="65" y="45">4</text>
<text x="35" y="75">5</text>
<text x="-5" y="85">6</text>
<text x="-45" y="75">7</text>
<text x="-75" y="45">8</text>
<text x="-85" y="5">9</text>
<text x="-75" y="-35">10</text>
<text x="-50" y="-65">11</text>
<text x="-10" y="-75">12</text>
</g>
<g id="digital" class="x-clock-digital">
<text id="digital-text" x="-40" y="30"></text>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment