logo

New Response

« Return to the main article

You are replying to:

  1. 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>

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment: