This demo shows how SVG can be used to render images retrieved from the Flickr interesting photo source and provide a dynamic, interactive user experience.

The purpose of this demo is to show illustrate that SVG can be used, just like HTML, for AJAX applications.

The magnifier effect used in this demo was inspired by Jared Tarbell's text sphere. Here, the magnifier effect is applied on a single (horizontal) axis.

See attributions for details on using the Flickr APIs.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, move the cursor to the bottom of the display. This will make the animated menu appear. The menu's speed is controlled by the distance from the center of the menu on the horizontal axis.

Like the Photo Album demo, this demo shows how SVG can be used to render images retrieved from the Flickr interesting photo source and provide a dynamic, interactive user experience.

This demo leverages the Yahoo YUI library with extensions to make it work with SVG elements, in particular to allow the animation of the transform attribute.

The magnifier effect used in this demo was inspired by Jared Tarbell's text sphere.

See attributions for details on the YUI library.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded a first page of images, click on the 'prev' or 'next' links at the bottom left of the page to load a new page.

WARNING: the demo runs very slowly in Firefox as of version 3.6.

This demo shows interactive animated SVG filter effects.

The animation is made by animating a displacement map image, with a radial gradient mask to smoothly fade out the edges. To be able to run the animation the browser must support SVG filters, declarative animation (SMIL) and scripting.

See attributions.

Running the demo

Click on the "Start SVG Demo" at the top of this page.

Then click anywhere on the image to start animating a droplet ripple effect from that point.

This demo uses an animated displacement map filter to make a twirling effect on a photo.

The displacement map image was created from an identity displacementmap svg image that was rasterized to 640x480 pixels and then processed in a normal graphics editor to produce this image. That image is then animated (rotated) by SVG declarative animation (SMIL).

See attributions.

Running the demo

Click on the "Start SVG Demo" at the top of this page.

This example illustrates the use of the following features:

• SVG Tiny 1.2 <video> and using SVG DOM interfaces for play and pause
• SVG declarative animations (SMIL)
• external SVG resource files
• SVG filters

See attributions about the resources used in this demo.