SVG + JavaScript tutorial: How to Code an Animated Watch скачать в хорошем качестве

SVG + JavaScript tutorial: How to Code an Animated Watch

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/ZE... Website — http://hunormarton.github.io/ CodePen — https://codepen.io/HunorMarton Twitter —   / hunorborbely   #svg #webdevelopment #creativecoding