Note: There are no new demos added at this point and this site is in maintenance mode
start svg demo download
o10.5 ff3.6 cr5.0 sa5.0

Bokeh

author: Erik Dahlström posted: August 22, 2010 at 06:00 PM categories: css3, animation, webfonts, filters view comments

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.

Read and Post Comments
start svg demo download
o10.5 ff3.7

Video

author: Erik Dahlström posted: October 04, 2009 at 03:00 PM categories: css3, video, webfonts, html5, clip view comments

Download Video: WebM | MP4 | OGG

This example illustrates the use of the following features:

  • SVG Tiny 1.2 <video>
  • SVG 1.1 circular clipping on playing video
  • external SVG resource files
  • HTML5 video
  • SVG used as a CSS 'background-image'
  • CSS3 media-queries for adapting to different windowsize
  • CSS3 webfonts

See attributions about the resources used in this demo.

Read and Post Comments