svg paths and arc

gistfile1.txt

<svg xmlns="http://www.w3.org/2000/svg">

    <!-- Middle point (M) of all out arcs. All arcs start at a point P <> M with
	 the distance d between P and M the radius of the arc. As the arcs are
	 to be circles , rx and ry will be equal d. The x-axis-rotation does
	 not have an effect on a circle, 0 is a good choice. -->
    <circle cx="150" cy="150" r="5" fill="black" />
    
    <!-- Arc path, given current point P (px, py) to new point N (nx, ny):
	 A  rx ry 
	    x-axis-rotation
	    large-arc-flag
	    sweep-flag
	    nx ny
    -->

    <!--
	 The effect of the sweep-flag:

	 sweep-flag = 1 ->  angle increases from P to N (``upwards'', red arc)
		    = 0 ->  angle decreases from P to N (``downwards'', green
			    arc)

	 ( The effect of the large-arc-flag: 
	    
	 large-arc-flag = 1 ->	take the long route along the ellipse
			= 1 ->	take the short route along the ellipse

	 Not demonstrated here, see http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands 
	 for a good and visual example. )
    -->
    <path 
	d="M 150 100 A 50 50 0 0 1 150 200"
	stroke="red"
	stroke-width="2"
	fill="none"
    />
    <path 
	d="M 150 100 A 50 50 0 0 0 150 200"
	stroke="green"
	stroke-width="2"
	fill="none"
    />

    <!-- 
	 How to draw an arc of arbitrary length and angle?

	 step 1:    know starting point (P)
	 step 2:    know arc and radius, in this example we take 120 degrees and
		    75 units
	 step 3:    compute M:
			mx = px - r
			my = py 
	 step 4:    compute N:
			nx = mx + cos( angle ) * r
			ny = my + sin( angle ) * r
	
	 in example: ~~ Starting at 90 degrees 
	    P = (225, 150)
	    M = (150, 150)
	    N = (112.5, 214.95)

120 degrees and 200 units
P1 = (200, 0)
M1 = (0,0)
N1 = (-100, 216.5)
m 200 0 a 200 200 0 0 0 -100 173
	 As y grows downwards, -120 degrees == 120 degrees as you would
	 encounter it normally mathematically
    -->
    <path 
	d="M 225 150 A 75 75 0 0 1 112.5 214.95"
	stroke="black"
	stroke-width="2"
	fill="none"
    />
    <!-- 
	 in example: ~~ Starting at 0 degrees
	    take for angle -120 and
	    change P to (225, 150), then:
	    M = (150, 150)
	    N = (112.05, 85.05)

	 -120 == 120
    -->
    <path 
	d="M 225 150 A 75 75 0 0 0 112.5 85.05"
	stroke="yellow"
	stroke-width="2"
	fill="none"
    />

</svg>