Freebie #3: Moto360 watch face HTML5/CSS3 animation

It's time to end the year 2014 with a quick freebie (call it a freeckie... bad joke, I know). Based on the success of my Lego Batman experiment, I created a Moto360 wireframe build entirely in HTML5 and CSS3 using animations, transitions and shapes. No Javascript.

See the Pen Moto360 watch face animation in CSS3 and HTML5 by Alecsandru Grigoriu (@Alecsandru) on CodePen.

For this simulation I created a minimalistic watch face based on two orbiting circles. The pink one is for the hour, while cyan is for minutes. I increased the speed so you can see how time flies. I also added an Android Wear-style notification you can discover at hover.

Acknowledgements

The code is not quite polished and I do plan to add some extra improvements and refinements. But have no fear, feel free to do what ever you want with this freebie. I am curious to see if someone will rebound this.

Where do I get it?

Besides the Live Preview above you can View it in Codepen or Check the Github Gist.

Have fun and see you back in 2015. I got big plans for this blog in the next year. It's part of my Ultra HD New Year's Resolution.