Date, JavaScript, setInterval(), SVG, Tutorials

JavaScript Clocks: Animating SVG

In our last article, we looked at the very basics of SVG: just enough to draw a hand on a blank clock face. In this article, we’ll be looking at how to animate those elements using JavaScript. Let’s take a look at where we left off last time. <html> <head> <title> Clock </title> </head> <body> <svg> <rect x=”50%” y=”5%” width=”1%” height=”45%” transform=”rotate(45, 50, 50)” /> … Continue reading JavaScript Clocks: Animating SVG

Daniel AllenJanuary 27, 2022December 30, 2023

SVG, Tutorials

JavaScript Clocks: Drawing with SVG

To make an analog clock in JavaScript we only need one thing we didn’t cover in our last tutorial: hands. First, we need a way to draw either a line or a rectangle on the web page. Second, we need to move or animate what we’ve drawn. Continue reading JavaScript Clocks: Drawing with SVG

Daniel AllenJanuary 27, 2022December 30, 2023

DKAllen78

Portfolio of Daniel Allen's work

Tag: clock

JavaScript Clocks: Animating SVG

JavaScript Clocks: Drawing with SVG