An SVG clock

An SVG clock

Sometimes we experiment and play with technology. The clock below is an SVG clock using SVG and Canvas technology to display local time. Doing it with these two technologies was easier than with JavaScript. The code doesn’t require calculating thousandths of a second like another clock I tried. The tutorial to make this clock is here: W3 Canvas Clock.








My errors when writing the code were to miss out a zero, hence missing out the central circle, and then adding + instead of * for minutes and seconds, so that the minute and second hands were wrong. When I spotted the typos I corrected them. Now it works.


I have 45 minutes of course left before I finish this course: Front End Web Development Ultimate Course 2021. Some parts could have been shortened. I find that it is a good course to take you through some of the parts that other courses skip on. I like that it takes time to explore bootstrap in full, jquery, SVG to some degree, and canvas. It showed me tools I either struggled to understand, or others that I didn't know existed. It allowed me to fill in gaps in knowledge that should make follow-up courses more interesting.


Tomorrow I have to experiment with the game that is included in the course. When I finish this course, I can move on with the next.