How to create an animated svg clock

How to create an animated svg clock

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.

  1. 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.
  2. 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″).
  3. 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.
  4. 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″).
  5. 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.
  6. 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.
  7. 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.

Overall, the code creates a clock face with animated hour and minute hands, along with a stationary center point.


pictory

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ads Blocker Image Powered by Code Help Pro

πŸ™πŸ™A Humble Request to Disable AdBlock πŸ™πŸ™

You can close this message & continue reading but...
❀️❀️❀️ Please consider visiting one of my sponsors first ❀️❀️❀️

DigitalOcean πŸš€

Sign up and get a $200, 60-day credit to try DO.
Spend $25 after your credit expires and I will also get $25 in credit!
DigitalOcean Referral Badge

Pictory πŸ€–

Create amazing videos using Pictorys AI powered software.
Its FREE to create your first 3 video projects
pictory


Hi Reader, I noticed that you are using an ad blocker while visiting my website. While I completely understand that excessive ads can hinder your browsing experience, ad revenue helps pay for the cost associated with operating this website.

jcutrer.com is a labor of love, created with the primary aim to provide you with quality content, free of cost. It’s a space where I share information, ideas, and insights that I hope have a meaningful impact. However, maintaining and updating this platform incurs substantial costs.

Sincerely,
Jonathan