No SVG Support No SVG Support

Figure 13.1: WWW13 Logo

Music play sound

Broadway musical

Animation

The New York logo consisted of the Statue of Liberty with a computer mouse wrapped around her arm. That gave us the idea of having the animation draw the logo as though a mouse was drawing it using a drawing tool. We added the IW3C2 logo as the design on the mouse mat and had the mouse move on the mouse mat in the same way that the logo itself was being drawn. Our biggest problem was to get the line drawing look sensible.

By rationalising the areas drawn as a sequence of evenly spaced cubics, it was possible to do the animation by moving the control points and the end points back to the start of the line and then animating these forward a pair at a time, a reasonably realistic animation ensued. Figure 13.2 below shows the approach. The animated line on the statue is shown in red. With 65 lines to draw, we used an XSLT transformation to create the animation.

No SVG Support

Figure 13.2: Drawing Lines

A more general form of this transformation was added to the path_ology library as thicken_cubic .

We set up a small laboratory called Mouse Lab where ideas were tried out before the final logo was generated.

animation running in New York

Figure 13.3: Preparing for the Opening Session