Bubble Background Demo
This is a tech demo experimenting with putting an SVG animation into the background of a webpage. The purpose was to determine whether this effect was feasible using contemporary web browsers and also to examine whether slowly-animating, textural backgrounds distract users by drawing the eye in the same way that attention-grabbing foreground animations are known to.
The bubble animation uses Javascript to manage clones of a transparent "bubble" symbol. To make the bubbles realistic several effects control their animation:
- Their velocity in the x direction is governed by a random walk plus dampening.
- As they rise, bubbles grow in volume, because the the pressure decreases.
- Bubbles accelerate as they rise, because they displace more water as they increase in size and are therefore more buoyant.
- Small bubbles have a higher terminal velocity than large bubbles.
- Bubbles wobble sinusoidally.
The SVG is displayed in the background using CSS position: fixed. The page is displayed over the top using position: relative and z-index control.
Gecko, particularly on Linux, exhibits particular performance problems when mixing HTML and SVG. One optimisation was found: setting the CSS opacity property causes Gecko to render the animation visibly faster. opacity requires the browser to render the box into an off-screen buffer. This offscreen buffer need not be invalidated as the background animates. Gecko may recognise this, or perhaps it is simply faster to composite into this buffer for internal reasons than to composite into a fully-animated webpage.
To apply this optimisation without making the page visible transparent, an opacity of 0.99 can be specified.
Known Issues
- Very CPU intensive
- Plugins don't appear on top of SVG in Gecko.