See the Pen Super Clock by Aurer (@aurer) on CodePen.

This started as an idea to visualise my current point in time, allowing me to see my progress through the current year, month, week, day and minute. I don't know why but it pleases me to see how far I am through the year.

I went through a few iterations to end up with this result. I started by using the canvas API but was never satisfied with the result, adding interaction was awkward and the accuracy of the drawing was never quite up to scratch. Perhaps if I had persevered I could have ended up with a satisfactory result, but in the end SVG was, I think, a better solution.

The elements of the clock are drawn using 'circle' elements, utilising the 'stoke-dasharray' and 'stroke-offset' attributes along with some calculations to display the progress of each element.