SVG Tutorial: Rotating Wheel Interface (with Clipping Paths and Scalable 2D Motion Graphics)
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
Seems like SVG is starting to sizzle.
A major conference (SVG Open 2011) wrapped up a few weeks ago, and quite a few SVG-related posts and links have been popping up here on DZone -- even as HTML5 Canvas gains momentum and threatens to replace SVG for some (definitely not all) specific applications.
But if coolness makes SVG hot, the same coolness can sometimes tempt developers to reserve it for the icing, not the cake. And however many times your undergraduate self may have tried to live on icing alone -- well, chances are, if you're reading this today, you eat mostly something else.
The next challenge is to look to SVG not only for animated scalable images, but also to use it as a core part of the interface of your site for the final knockout in the match with Flash, obviously not falling in useless skip intro animation and find a good compromise solution between usability and a never underestimated value: coolness.
Here's what Marco means:
which isn't just random images (it gets cooler), but works like this:
The interface of vlog.it is composed by three rotating circle created by 48 thumbnails (chosen randomly) that let play over 300 Vimeos and over 1000 YouTube videos from my favorite ones. At the onload and before the opening of every video several black & white animations, with primitive shapes, are played in full screen...
Marco's tutorial walks you through creating a simplified version of his Vlog.it interface, using Illustrator (but Inkscape would work too) to produce slick but easy-to-understand clipping paths. He goes on to attach hovers to the clipped images -- something HTML5 Canvas can't do quite so well.