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.

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.

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!