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 illustrates the use of the following features:
See attributions about the resources used in this demo.