You are viewing this page out of context. To see it in the context it is intended please click here.

About This Page

Reply posted by Brandon on Wed 26 Jun 2002 in response to Painting with SVG, a primer

Here's a clock I built in SVG!

Okay, here's another non-chart thing. Again, not necessarily useful, but it
might get some creative juices flowing.


I'll warn you that it starts out with all three hands on the nine, but if you
wait, you'll see that they really do advance just like a clock's hands.
------------------------------------------------
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify">


<desc>A Clock, my first SVG ever, hacked together by hand. -Brandon
Zylstra</desc>
<!-- based on http://www.zvon.org/xxl/svgReference/
Standard/images/animate/animMotion01.svg -->

<!-- Outline of clock, with indicators for 12, 3, 6, and 9. -->
<path d="M 100,250 C 100,50 400,50 400,250 C 400,450 100,450 100,250"
style="fill:none; stroke:black; stroke-width:7" />
<circle cx="100" cy="250" r="10" style="fill:black" />
<circle cx="250" cy="100" r="10" style="fill:black" />
<circle cx="400" cy="250" r="10" style="fill:black" />
<circle cx="250" cy="400" r="10" style="fill:black" />


<!-- plot clockface center-->
<circle cx="250" cy="250" r="10" style="fill:black" />


<!-- Second hand -->
<path d="M 0,0 L -5,-5 L 0,-100 L 5,-5 L 0,0 z"
style="fill:black; stroke:white; stroke-width:1" >
<!-- Define the motion path animation -->
<animateMotion dur="60s" repeatCount="indefinite"
path="M 200,250 C 200,182 300,182 300,250
C 300,318 200,318 200,250"
rotate="auto" />
</path>
<!-- Minute hand -->
<path d="M 0,0 L -5,-5 L 0,-100 L 5,-5 L 0,0 z"
style="fill:black; stroke:white; stroke-width:1" >
<!-- Define the motion path animation -->
<animateMotion dur="60m" repeatCount="indefinite"
path="M 200,250 C 200,182 300,182 300,250
C 300,318 200,318 200,250"
rotate="auto" />
</path>
<!-- Hour hand -->
<path d="M 0,0 L -5,-5 L 0,-100 L 5,-5 L 0,0 z"
style="fill:black; stroke:white; stroke-width:1" >
<!-- Define the motion path animation -->
<animateMotion dur="12h" repeatCount="indefinite"
path="M 200,250 C 200,182 300,182 300,250
C 300,318 200,318 200,250"
rotate="auto" />
</path>


<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
style="fill:black; stroke:white; stroke-width:1" />


<g id="guides" visibility="hidden">
<!-- plot key points for clockface circle path-->
<circle cx="100" cy="50" r="5" style="fill:blue" />
<circle cx="400" cy="50" r="5" style="fill:blue" />
<circle cx="400" cy="250" r="5" style="fill:blue" />
<circle cx="400" cy="450" r="5" style="fill:blue" />
<circle cx="100" cy="450" r="5" style="fill:blue" />
<circle cx="100" cy="250" r="5" style="fill:blue" />


<!-- plot key points for hand path-->
<circle cx="200" cy="182" r="5" style="fill:purple" />
<circle cx="300" cy="182" r="5" style="fill:purple" />
<circle cx="300" cy="250" r="5" style="fill:red" />
<circle cx="300" cy="318" r="5" style="fill:purple" />
<circle cx="200" cy="318" r="5" style="fill:purple" />
<circle cx="200" cy="250" r="5" style="fill:red" />


<!-- example of second hand -->
<path d="M 10,0 L15,5 L 10,100 L 5,5 L 10,0 z"
style="fill:black; stroke:white; stroke-width:1" />
</g>
<!-- Things this needs:


1) an easy way to specify the starting time, so that the clock can start at an
arbitrary time


2) the path for the hand is not perfectly circular. I assume its done with
Bezier curves, but I don't know the formula for those, so I figured out roughly
how it works and then basically eyeballed it until I got it pretty darn close.
Make the guides visible to see where the key points are for calculating the
path, if you find they help you. I couldn't have done it without them.


-->
</svg>