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 svg <pattern> element. The background rectangle is drawn with a simple pattern made of dots and rectangles, similar to that found in modern art work and designs (e.g., Vasarely, Verner Panton). The "svg" text is painted with a similar, inverted pattern.

Patterns a common in computer graphics. However, SVG patterns are powerful in that they can be defined not only as bitmap content, which is the common case in graphics libraries, but also as vector content. In other words, the content of an SVG pattern can be any arbitrary SVG graphics. Furthermore, SVG patterns can be created by scripts.

In the initial rendering, there is actually no outline for the text, and our perception still makes out the 'svg' shape outline by assuming continuity between unconnected path segments. This is an optical illusion similar to what happens with the famous Kanizsa triangle.

Note, however, that even though there is no real "svg" shape in the visual rendering, a shape is actually filled with a different pattern...

Running the demo

After loading the demo, move the cursor over the rectangle. This will first show the 'SVG' text filled with a different pattern. Then, move the cursor over the text iteself to show the text in another, colored pattern.