How to Create a Working Clock in Inkscape

Did you know that you can now make animated vector graphics for the web? In this tutorial, we’ll be using Inkscape to draw a clock and Snap.svg to animate it to the actual time!

If you don’t have any Snap.svg experience, I highly recommend reading the Snap.svg Animation Tutorial for Beginners.

The Final Result

1. Creating the Clock

Step 1

First we should draw the fancy stuff like the clock border, measurement lines, and background. I’ve followed the exact technique from my tachometer tutorial, so this should be fairly easy to do.

clock without needles

Step 2

I have my second, minute, and hour needles below. I’ve also assigned an ID/Label for each one, of course.

clock needles

Step 3

Then I just centered all of the needles accordingly and kept them pointed at the 12 mark. Now we need to Save as a Plain SVG for the upcoming scripting.

clock in inkscape

2. Animating the Clock

Step 1

First up is the first part of our Javascript. Below, we’re just starting up Snap, adding the needles, running the upcoming animation function, and appending to the HTML.

window.onload = function () {
var s = Snap("#clockDiv");
Snap.load("clock.svg", function(f) {
//Add SVG elements
second ="#second");
minute ="#minute");
hour ="#hour");
//Run animation function for the first time
//Append SVG to DIV                    

Step 2

The second part of our Javascript is the actual animating. You’ll notice that the script below is fully commented for your convenience.

function animateTime() {
//Get the current time                
  var timeNow = new Date();
  var hours   = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();
//Move second needle halfway                
  second.transform('r' + (seconds*6-3) + ',200,200');
//Animate the second needle the rest of the way
  second.animate({transform: 'r' + (seconds*6) + ',200,200'}, 500, mina.elastic);
//Move minute needle                
  minute.transform('r' + (minutes*6) + ',200,200');
//Only animate the minute needle when the minute changes    
  if(seconds == 0){minute.transform('r' + (minutes*6-3) + ',200,200');
  minute.animate({transform: 'r' + (minutes*6) + ',200,200'}, 500, mina.elastic);}
//Allow the hour needle to move accordingly when the minutes change             
  hour.transform('r' + ((hours*30)+(minutes/2)) + ',200,200');
//Repeat this entire function every 1 second
  setTimeout("animateTime()", 1000);

Step 3

Below is my running HTML which is simply the DIV which holds the clock. If I do say so myself, this is amazing!

That’s It!

The end result for this animated, working clock is one of my favorites ever. I love the concept of an actual usable vector graphic on the web, and this does just that. Hopefully this gets you started with some of your own neat Snap.svg ideas. If you’re interested, you can check out this Inkscape animation tutorial as well. Thanks for reading!


Add a Comment

Your email address will not be published. Required fields are marked *