This site will look much better in a browser that supports web standards, but is accessible to any browser or Internet device.

SVG Play

I have spent a little time playing with SVG. This page will display some of my less serious SVG projects.


Wuse is a relatively simple piece of eye-candy I ported to SVG to see how it would work. The original was written in the late eighties in Borland C. The color scheme for the current version was chosen by my son in 2003. Enjoy.

In the late eighties, I decided to make my first foray into graphics programming. I'm not much of a graphics person, but I had seen a few programs that used randomly varying patterns on the screen to generate interesting effects. One of these programs was called fuse (I think), and it used a set of lines bouncing off the edges of the screen as the basis of its effect.

I decided to make my own version that circled around the center of the screen. I named it wuse since it was a variation on fuse. With input from a few other engineering types, I settled on the current design. It randomly modifies the parameters to a couple of trigonometric functions to determine the endpoints of the lines. The transition points were chosen to avoid discontinuities. We tried several variations, but this was the one I kept around.

This program actually serves no purpose and doesn't really demonstrate any interesting programming principles. In fact, it violates several best practices that I try to always follow. On the other hand, it isn't really worth cleaning up too much.

January 29, 2006

Surprisingly, this was the only one of my SVG projects that worked on FireFox without changes. Unfortunately, it does tend to run quite a bit slower on FireFox. It does run fast enough to get the general effect though.

October 14, 2008

As part of an effort to compare the speed of different JavaScript implementations, I've added the ability to change the speed at which wuse runs. If you append the parameter interval=n as a parameter to the SVG file, it changes the refresh wait time for the animation. The parameter must be a positive integer. It represents the number of milliseconds between new line additions. The default is 30.

For example, wuse.svg?interval=10 should run close to 3 times faster than the default, and wuse.svg?interval=1000 would have one update every second.

Valid XHTML 1.0!