CSS-Animated Synchronized Clocks

Every once in awhile at Astuteo, we have a fun idea and can’t help ourselves. Considering Primex is in the synchronized time business, we animated a pair of otherwise static clocks to feature on the homepage. The three hands of the clock were erased from the original product photo and recreated as SVG elements. With CSS animation, javascript and a little bit of math, we added them back – rotating at their appropriate speeds.

For the cherry on top, we synced the starting position of the clock hands to the local time of the user’s computer, displaying perfect synchronized time to every website visitor around the world.