My first SVG...

LTjake on 2004-03-19T12:54:42

I've been interested in SVG for quite a while, though I hadn't actually tried it out until the other day. Besides drawing basic shapes and paths, I decided to do a little animated project -- something simple to get me started:

A clock.

If you have any comments on this code, I'd love to hear them!

Some notes:

  • Each piece of the clock has an id (clock, face, hour, minute, second) or class (tick [hour marker], smalltick [minute marker], center). They can be styled however you want.

  • You can change aspects of the clock by changing the initial SVG shapes. e.g. You can move the clock's center by changing #face's cx and cy, or you can change the length of the hands by modifying their initial height.

  • The ticks and center circle are created in the initial javascript load event. Their lengths are proportionate to the radius of the clock face.

I'm interested in doing some more practical applications with SVG. One of the things I had planned on a while ago was a foafnaut clone which would handle the relationship extension. I could then output FOAF from my family's GEDCOM data and graph the family tree.