SVG animation with Javascript

An SVG watch.

This wont work in IE because it doesn’t support the css transform property on SVG elements. Why? Who freakin knows.

The SVG image format is, according to Wikipedia, an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Cool! There’s all kinds of fun that I could have with that.

I decided to make a copy of my favorite watch and animate it with JavaScript. Honestly though I chose it cause it was easy to draw! Once the watch was drawn in Illustrator, I exported it as an SVG and began coding the JavaScript to interact with the watch hand elements. I decided to embed the JavaScript and CSS code right into the SVG file, it could easily have been external though.  Overall this was a pretty straight forward and fairly useless project, and I’m looking forward to making more like it!


Tags: , , , , , , ,

Categories: CSS,design,Illustrator,JavaScript,Web Development