Figure 3.1: WWW3 Logo
Music
German oompah band
Animation
This animation demonstrates a number of SVG features:
- The three Ws are drawn three times but with different clip boundaries to give the sliced effect
- The text is drawn twice slightly offset to give the drop shadow effect
- The greyish rectangular background morphs into the background of the logo by animating a complex path
The last effect is not particularly easy in SVG as the two paths (the rectangle) and the final path have to have the same structure. It is necessary to turn the rectangle into a path with a set of cubics equal in number to the final background. The effect is shown below. Not quite as elegant when you can see the detail.
This requirement was one of the motivations for the Path_ology library of transformations which includes one for splitting cubic curves in two.
Figure 3.2: WWW3 Morphing