In this SVG tutorial, we are going to code a watch. Since SVG images can be inlined in HTML we can manipulate them with JavaScript. We can animate parts of an image from code, make it interactive, or turn things around and generate graphics from data. In this example, we are going to create a watch. We will use SVG to paint the watch, and use JavaScript to animate the hands and add some interaction.
0:00 Introduction
1:25 The SVG tag
6:34 Drawing minute markers with stroke-dasharray
14:51 Drawing the hour hands
17:04 Animating the hands with JavaScript
21:23 Adding a clickable calendar window
24:41 Next steps
You find the finished watch and its source code here: https://codepen.io/HunorMarton/pen/ZEXXxxo
Website — http://hunormarton.github.io/
CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely
#svg #webdevelopment #creativecoding