Note: There are no new demos added at this point and this site is in maintenance mode
start svg demo download
cr5.0 o10.6 ff3.6 sa5.0

Gandhi Quotes

author: Vincent Hardy posted: October 05, 2010 at 06:00 PM categories: animation, ui, morphing, audio view comments

Download Video: WebM | MP4 | OGG

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.

Read and Post Comments
start svg demo download
cr5.0 o10.6 ff3.6 sa5.0


author: Vincent Hardy posted: August 14, 2010 at 06:00 PM categories: interactivity, camera, animation, yui, audio view comments

Download Video: WebM | MP4 | OGG

Running the demo

Click on the "Start SVG Demo" at the top of this page. After the loading message disappears, click in the display area to start the demo.

Using the camera metaphore to script zoom and pan

Sometimes, we only think of animation as moving objects, changing their sizes, positions or other properties. This demo shows that we can also create animation effects by moving a 'camera' around.

The camera effect is created by animating the transform on a target <g> in the SVG content, which creates the illusion of a camera moving over the group of elements contained in the target group.

Camera utility

The demo uses a small utility camera.js which makes it easy to create this type of effect.

Following is a sample of how to instantiate, configure and start the camera with the action method.

var cameraTarget ='#cameraTarget'), // Uses YUI 3.0 for DOM access.
    Easing = Y.Easing;
var defaultInterpolators = {
    zoom: Easing.easeNone,
    direction: Easing.easeBothStrong ,
    position: Easing.easeBothStrong
var camera = new{
    target: cameraTarget, // The element containing the content to navigate over
    viewport: {width: 800, height: 600}, // The camera's viewport
    frameLength: 10,  // Controls the camera's movement speed.
    position: {x: 243, y: 68}, // The camera's initial position
    direction: 90, // The camera angle
    zoom: 7 // The camera's zoom level.

        name: "wherever",
        position: {x: 243, y: 384},
        direction: 90,
        zoom: 7,
        runLength: 1000,
        interpolators: defaultInterpolators
    }, {
        name: "you",
        position: {x: 440, y: 368},
        direction: 180,
        zoom: 1.6,
        runLength: 2000,
        interpolators: defaultInterpolators
    }, ... // More camera positions


The following figure illustrates how the zoom level, direction and position specify the successive positions of the camera over the composition.


Many thanks to Roger Kidd for creating this demo's rythmic arrangment.

Read and Post Comments
start svg demo download
cr4.0 sa4.0 ff3.5 o10.5

Animated Lyrics

author: Vincent Hardy posted: October 04, 2009 at 03:00 PM categories: audio, animation, interactive view comments

Download Video: WebM | MP4 | OGG

This example illustrates the use of the following features:

  • Depending on the implementation, SVG or HTML 5 <audio> in a <foreignObject>
  • Web fonts
  • Text on a path
  • Scripted animation

Note that the demo uses setTimer to synchronize the lyrics with the audio because the new audio timeupdate event is not supported in all the browsers yet. However, as explained on Silvia Pfeiffer's site it would be a better way to synchronize the lyrics in a pure HTML5 context.

See attributions about the song and fonts used in this demo (also showing at the end of the demo). The code leverages the YUI library with an extension to allow animation of SVG transform attributes.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, click in the center of the image. Then, once the menu has settled, click on the "ancient sun" item.

Read and Post Comments