This demo shows how to create an interactive svg webapp. Place a beard/mustache on a photo of your choice.

Running the demo

Hover the bottom part of the photo to show the palette of available face enhancements, and drag the one of your choice from the palette to the photo.

When an item is selected it can be rotated by pressing the right- or left-arrow key. To scale an item press up- or down-arrow key to zoom in or out respectively. To rotate/scale in smaller steps hold down the shiftkey at the same time. To remove an item, select it and then press backspace or delete.

You can also add your own photo by clicking the "Add photo" button in the palette, as well as save the result to a data uri. Per default the saved svg file only links to the photo, but it's also possible to save a standalone file by following this link (note that big photos can take a bit of time to export, and your browser may appear frozen during the encoding phase).

See attributions about the resources used in this demo.

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.

This example shows how SVG filter primitives can be applied to produce a sophisticated rendering effect. In this image, a filter effect is applied to <text> elements. One with the "SVG" text and several with the "W", "O", "W", "!" characters. The characters are grouped into a <g> element which has a 'glow' filter. The "SVG" text has a 'chiseled' filter applied to it.

The 'glow' filter

This is a simple filter and it does the following:

1. Turn the input (i.e., the "WOW!" text) into white, using the <feFlood> and <feComposite> filters. feFlood creates a white surface which is composited with the text's alpha (i.e., a chanel providing the translucency information about the text's rendering) using the 'in' operator.
2. The white rendering of the text input is blurred using the <feGaussianBlur> filter
3. The blured white is combined with the original text rendering using the <feMerge> filter

The 'cliseled' filter

This filter is more elaborate and contains 22 filter primitives to achieve the chiseled gold effect.

There a multiple parts to the filter. The background texture is created using an image texture, loaded with an <feImage>. The texture is then used as a bump map (created with an <feColorMatrix> which allows us to convert the texture's luminance to an alpha channel, required as an input for the lighting filter's bump map) to give it more texture with an <feDiffuseLighting> filter.

The golden text is done very much similarly, except that the bump map is created by blurring the text's alpha channel and the color compolents are adjusted with <feComponentTransfer>.

There is also a drop shadow effect done with a combination of <feGaussianBlur>, <feMorphology>, <feOffset> and <feComposite>.

Multiple instances of the feMerge> and <feComposite> filters are used to overlay or mask different intermediate filter primitive results.

This demo illustrates the use of the getPointAtLength() API on the SVG <path> element.

The script simply accesses the path of an object and gets the coordinates of points along that path. Then, it positions a 'pebble' of random size at a pseudo-random position about the coordinates returned by getPointAtLength

Inkscape was used to convert the "SVG" and "Wow!" texts to SVG paths elements which the demo code manipulates.

See attributions for the OpenClipArt play/pause icons.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, click in the play button at the bottom right. Once the "SVG" text has fully appeared, click on the display.

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.