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

#svg #webdevelopment #creativecoding

Рекомендации по теме

Комментарии

There's a bug in the code in this video. Can you spot it? Why doesn't it cause any trouble?

HunorMartonBorbely

Not only an excellent tutorial in terms of content presented, but also beautifully produced and narrated.

christaylor

hunor!! Great and Advanced as usual, Am totally ready for all the maths and physics you're chopping this year.. wishing you a wonderful 2022 Hunor!

stanleychukwu

Great tutorial! If you want to keep your HTML super clean you can move the script element to the head and add a "defer" attribute. It has the same effect as it loads the script but executes it only after the DOM was parsed.

pxlbltz

Hi Hunor do you plan any video in the next coming month ?
I really appreaciate your video on three.js
Cheers

decathlonjuste

Question - if the animate function is called recursively, will the browser able to detect the click event of the txt . the toggle works in Chrome, but in Safari the txt toggle click event is not getting called as the animate function is running. any comment ?
btw thanks for this video @HunorMartonBorbely

johnvarghese

Video very interesting, but it’s a pity that the audio is very low

eugeniogonzato

is is possible to export the animation as video?

tmawn

Hey Hunor glad to hear you again ?
Do you have some project in mind for this channel ?
May I suggest you some idea for future video ?
but I think it could be a good video to make a small game Like an M.C. Escher-inspired maze with three.js
keep it up

soniamaklouf

SVG + JavaScript tutorial: How to Code an Animated Watch

SVG Explained in 100 Seconds

Complex SVG Animations Made Simple with JavaScript

A beginners guide to SVG | Part One: The Why, What, and How

SVG + JavaScript tutorial: How to Code an Animated Watch

Make Awesome SVG Animations with CSS // 7 Useful Techniques

Web Animation with SVG, CSS and JavaScript Tutorial

SVG Icons Tutorial - A Look at Vivid.js

SVG Path

Permissions & Authorization in a Next.js Full Stack Project

Javascript SVG animation

SVG Animations Idea | 7 SVG Animations You Must See! | Html Css Javascript Effects & Animations

SVG.js Lesson 01 - Basic Usage of SVG.js

How to Add SVGs with JavaScript! CodePen Tutorial!

SVG text animation in HTML CSS | CSS animation #css #shorts #html #svg

Animation SVG with CSS only

How to Morph an SVG using Framer Motion, Flubber.js and Nextjs

D3.js Tutorial for Beginners-08- Adding SVG element using D3

Interactive map using JavaScript and SVG

Gummi Effekt Tutorial bei SVG Grafiken mit JavaScript im Web Design! [TUTORIAL]

Anime.js Tutorial - Part 2: SVG Path, Morphing, Line Drawing

JPG vs PNG vs WEBP vs GIF vs SVG

SVG Viewport and viewBox (For Complete Beginners)

Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS

#4 Circle | SVG | Frontend #shorts