Ugly Morphing SVG Text

This example is brought to you in an effort to show that SVG can be used to push the already swollen boundaries of ugly web pages with cruddy text and tacky animation. It's a combination of SVG and Javascript (you can view the source to see what's happening).

You'll need the Adobe SVG viewer to see it (I've only tested with the 2.0 beta, but you should upgrade to this version anyway as it supports SVG fonts). Unfortunately, the Javascript is a little too much for the CSIRO and Batik viewers. It also performs much better under Internet Explorer than Netscape.

To display your own text string, simply enter the text you wish to display in the input field and press the button. An example string might be: "Disco Inferno". This example limits word length to 8 characters, but if you modify the source you can easily increase it. No punctuation is displayed at the moment.

You can change from square to round pixels quite easily, just have a look at the source code.

The cool thing is that this text remains accessible at all times. The SVG contains descriptions of the entire string being animated, as well as a description of the current word. Considering how ugly the text looks, many people may prefer to use the accessible version.

After doing this, I realised you could probably do everything here in pure HTML and Javascript, but it wouldn't be as cool since it doesn't use SVG.

Author: