Bokeh effects, which in simple terms is in-focus objects in front of an out-of-focus or blurred background, come in many different forms, as you can see on Flickr for example.

In this demo some circles are generated by javascript. The circles are added to the background, given some nice colors and blurred a bit to create a faux bokeh effect.

As you will notice from reloading the demo, the position of each circle is random, and the radius depends on the distance from the center of the svg image. The further away from the center a circle is the larger the radius. The computed radii are then used for dividing the circles into three different blur levels. Finally the color of the each circles depend on its computed position. CSS3 hsl color syntax is used to provide every circle with a fill-color that is similar to all the nearby circles.

After the circles have been generated they are added to the background group element which happens to have a 'buffered-rendering' attribute set to 'static'.

The 'buffered-rendering' attribute tells the browser it's probably a good idea to cache the rendering of that subtree. In essence it's like having the same thing as a pre-rendered raster image, but with the added benefits that SVG provides. E.g if you ever need to resize or update the subtree you can, just remove the 'buffered-rendering' attribute and it will behave as normal again. In browsers that don't support 'buffered-rendering' the SVG rendering will be unaffected by the attribute.

To see the effect of 'buffered-rendering' click the svg image and the text will animate on top of the background.

The demo uses the Vitamin font.

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 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.

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.