Open main menu

Drawing clock face

Revision as of 16:30, 13 July 2019 by Aki (talk | contribs)

Simple drawing with SVG

 You can create simple clock face figure with scalar vector graphic (SVG).

  • Since it is natural to use polar coordinates for circular figure like this, draw the circle around the origin, then translate to visible SVG user space.
<svg viewBox="-100 -100 200 200" 
       xmlns="http://www.w3.org/2000/svg">
<circle r="100" stroke="black" />
</svg>
  • To draw ticks, use stroke-dasharray attribute noting that, with r="57.3", the circumference length of the circle becomes 360, thus one stroke every six marks the minute marks.
<svg viewBox="-100 -100 200 200" 
       stroke="black" fill="none"
       xmlns="http://www.w3.org/2000/svg">
<circle r="57.3" transform="scale(1.07) rotate(-0.5)" stroke-dasharray="1 5"/>
</svg>

Note scale(1.07) makes the circle radius 60 for a nice round number, and rotate(-0.5) correct for stroke-dasharray offset

  • You can also correct for the offset with something like this
<circle r="57.3" stroke-dasharray="0.5 29 0.5 0" stroke-width="8"/>