How to create an animated svg clock

By JC | June 19, 2023 | Comments 0 Comment

The following code example demonstrates how to generate an SVG image of an animated clock.

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
  <circle class="face-color" cx="100" cy="100" r="90" fill="#fff" stroke="#000" stroke-width="10"/>
  
  <line x1="100" y1="100" x2="100" y2="50" stroke="#000" stroke-width="5" id="hourHand" stroke-linecap="round" />
  <line x1="100" y1="100" x2="100" y2="30" stroke="#000" stroke-width="3" id="minuteHand"  stroke-linecap="round" />
  <circle cx="100" cy="100" r="2" fill="#000" stroke="#000" stroke-width="3"/>
  <!--- line x1="100" y1="100" x2="100" y2="20" stroke="#000" stroke-width="1" id="secondHand"/ -->
  
  <animateTransform xlink:href="#hourHand" attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="12s" repeatCount="indefinite"/>
  <animateTransform xlink:href="#minuteHand" attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"/>
  <!-- animateTransform xlink:href="#secondHand" attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur=".5s" repeatCount="indefinite"/ -->
<style>
.face-color {fill: #DDD;stroke: navy;}
#hourHand {stroke: #333;}
#minuteHand {stroke: #566;}
</style>
</svg>

Let’s take a look at what the above svg code does.

The <svg> element defines the SVG canvas with a width and height of 200 pixels and a viewBox attribute that sets the coordinate system to cover the entire canvas.
The <circle> element represents the clock face. It is positioned at the center of the canvas (cx=”100″, cy=”100″) with a radius of 90 pixels (r=”90″). It has a white fill color (fill=”#fff”) and a black stroke color (stroke=”#000″) with a stroke width of 10 pixels (stroke-width=”10″).
Two <line> elements are used to create the hour and minute hands. The hour hand is defined by the first line (id=”hourHand”) and the minute hand by the second line (id=”minuteHand”). Both lines have their starting point at the center of the clock (x1=”100″, y1=”100″) and extend upwards. The hour hand is longer and reaches y2=”50″, while the minute hand is shorter and reaches y2=”30″. Both lines have black stroke colors (stroke=”#000″) and different stroke widths.
The <circle> element with a radius of 2 pixels (r=”2″) represents the center point of the clock. It is positioned at the center of the clock (cx=”100″, cy=”100″) and has a black fill and stroke color (fill=”#000″, stroke=”#000″) with a stroke width of 3 pixels (stroke-width=”3″).
The <animateTransform> elements are used to animate the rotation of the hour and minute hands. The xlink:href attribute refers to the hour and minute hand elements by their IDs (#hourHand and #minuteHand). The attributeName attribute is set to “transform” to modify the transformation of the elements. The attributeType is set to “XML” to specify that the transformation is an XML attribute. The type attribute is set to “rotate” to specify a rotation transformation. The from attribute defines the initial rotation angle (0 degrees) and rotation point (100, 100). The to attribute defines the final rotation angle (360 degrees, a full circle) and rotation point (100, 100). The dur attribute specifies the duration of the animation in seconds. The repeatCount attribute is set to “indefinite” to make the animation repeat indefinitely.
The commented out <line> element represents a second hand that is not included in the animation. It is similar to the hour and minute hands but has a shorter length (y2=”20″) and a thinner stroke width.
The <style> block contains CSS rules that define the appearance of different elements. The .face-color class sets the fill color of the clock face to a light gray (#DDD) and the stroke color to navy. The #hourHand and #minuteHand IDs set specific stroke colors for the respective hands.