This is more of a showcase than a demo as it assembles multiple techniques discussed in other blogs.

The demo first uses a 'camera' to zoom and pan around quotes from Mohandas Karamchand Gandhi. This uses the camera utility described in a different blog entry.

After the camera has lingered on each quote long enough for the viewer to read through it, the final dot is displayed. When all quotes have been read, the camera zooms out, the quotes roll out and fade out but the dots stay and morph in a set of pebbles in the center of the screen. These pebbles in turn morph into Gandhi's stylized portrait.

All the animation effects are implemented using YUI 3 with specific SVG extensions, in particular to allow the animation of the transform attribute and the animation of the d attribute on the <path> element for morphing animations.

Gandhi's portrait was created in Illustrator from a scan of a drawing made by a friend.

The audio track is a guitar arrangement created specially for this demo by a another friend (who prefers anonymity).

Gandhi's quotes were found on The Quotations Page web site.

The font used for the text is GoodDog.

Running the demo

Click on the "Start SVG Demo" at the top of this page. Wait for the audio to load, then click the 'play' button when it appears.