No SVG Support No SVG Support

Figure 8.1: WWW8 Logo

Music play sound

French / Canadian sister harmonies

Animation

The logo is a stylised maple leaf. Starting with a real maple leaf photograph, we converted it twice with Siame Vision Eye. A high contrast scan gave us a clipping boundary and the more detailed one gave us an SVG leaf to morph. It floats down from the tree. Initially, feComponentTransfer was used to turn it to a solid red and the outline is morphed to the three Ws that makes up the leaf outline. For this animation, we had to make a few changes to avoid the filter function not currently implemented on all the browsers.

Getting from the highly detailed SVG that was given back by Vision Eye to something manageable, we used the path_ology library to remove detail, simplify the curves and lower the accuracy. Without that, the leaf refused to float down smoothly. Below is, on the left, the simplified leaf used at the Budapest Conference and the more drastic reduction used here. The original version from Vision Eye consisted of 1186 paths. The one used at Budapest reduced it to 980 paths. The one used here has just 5 rather more complex paths. At New York, Tokyo and Edinburgh further simplifications took place as each new animation was added to keep the overall computation doable!

No SVG Support

Figure 8.2: Leaf Simplification