No SVG Support No SVG Support

Figure 7.1: WWW7 Logo

Music play sound

Didgeridoo and rainstick

Animation

The logo contains many black, orange and yellow paint blobs which could have been quite tedious to draw. We also wanted the blobs to move as the Ws expand. Earlier we had explored the use of non-standard SVG fonts. The three advantages in using SVG fonts are:

  • SVG allows text to follow a defined path
  • The path can be animated and the text should still follow it
  • The start of the text can be offset along the curve. Animating the offset allows the text to move along a path

Figure 7.2 shows a roadtrain font that we defined for an AusWeb Conference. In full SVG (not implemented by most browsers, the individual glyphs can be multi-coloured and animated. The code needed, once the font was defined is:

<path id="road" d="M200,300h800"/>
<text font-size="80px" font-family="roadtrain" >
<textPath id="rt"  xlink:href="#road" startOffset="100%">THAWAFAVAGADAOAJAEAP</textPath>
</text>
<animate attributeName="startOffset" values="100%;0%" begin="0s" dur="5s" xlink:href="#rt" fill="freeze"/>

Figure 7.2 mock-ups the animation (click the cyan button) as only the Adobe SVG Plugin currently supports the full SVG font definitions.

For the Brisbane Conference, a small font of representative blob shapes were constructed and text in the blob font is defined as text on a path . By animating the W path and the size of the font gave us the desired effect.

No SVG Support

Figure 7.2: The Roadtrain Font

Below we have animated the three Ws in the same way but using normal fonts.

No SVG Support

Figure 7.3: Using Normal Fonts