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 SVG is displayed in the background using CSS
position: fixed. The page is displayed over the top using
position: relative and
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.