hosted at (


Experiments in SVG

All of these should work with the Adobe plugin and Netscape 4.7 or IE 5.5. Click on the images to view.

Update 2001/10/07: Well, looks like these mostly still work all right, which is a Good Thing. In the past year, Adobe has gone through a couple more iterations of their SVG plug-in and W3 finally made the SVG spec an official recommendation, so I expected some things to break.

jack-o-lantern Carvable pumpkin for Halloween. added 2000/10/25
bubbles Bubbles rising through the water. More javascript. added 2000/10/12
the debian logo A Debian GNU/Linux logo in SVG. This was done using dia and vi. (update 20011007: no longer looks right)
dynamic rectangles Dynamic creation/animation of rectangles using javascript. Doesn't work with IE 5.0 (which doesn't allow array stack operations.)
more dynamic animation More dynamic animation with javascript. Here, I am trying to animate something that looks approximately like fireflies at night.
gravity A ball subject to gravity (constant downward acceleration.) Click on the ball to grab, release the button while moving the mouse to throw.
mouse tracking Simple javascript to read the coordinates from a mousemove event. The svg's viewBox is set to 1000x1000, so why don't clientX, clientY scale? (update 20011007: no longer works)
throwing balls Throwable balls in a box. The sides are perfectly elastic, but the balls are otherwise subject to friction. Again this is javascript. (update 20011007: sort of works, but broken)
particle sine wave A simple sine wave. If you animate the y-coordinate too, you can get lissajous pattern (although I'd first increase the number of circles.)
shockwve logo An animated Shockwave logo. This was done entirely in vi and uses declarative animation.
animated circles An array of animated circles triggered by mouseover events. I've seen this done with Flash before. This combines declarative animation and javascript. (update 20011007: no longer works)


Valid XHTML 1.0!

$Id: index.shtml,v 1.5 2004/02/03 21:57:46 eric Exp $