Fast Blur
posted: October 04, 2009 at 03:00 PM categories: animation, filters view comments
Download Video: WebM | MP4 | OGG
This demo shows how to use SVG filters and declarative animation to get smooth transitions for text. By animating the gaussian blur standard deviation factor only in the x axis, the text only gets blurred horizontally.
The demo will show a warning if the necessary browser functionality isn't available.
Running the demo
Click on the "Start SVG Demo" at the top of this page.
Photo Album
posted: October 04, 2009 at 03:00 PM categories: animation, interactive view comments
Download Video: WebM | MP4 | OGG
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.
Light Table
posted: October 04, 2009 at 03:00 PM categories: animation, interactive view comments
Download Video: WebM | MP4 | OGG
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.
Ripple
posted: October 04, 2009 at 03:00 PM categories: animation, filters, interactive view comments
Download Video: WebM | MP4 | OGG
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.
Video Overlay
posted: October 04, 2009 at 03:00 PM categories: animation, video, filters view comments
Download Video: WebM | MP4 | OGG
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.