Drawing multiple circular arcs dynamically using SVG

Question

I\'ve got SVG image (code below):

Answer 1

SVG arcs are drawn with A rx ry rotation large-arc-flag sweep-flag x y The key parameters here are rx and ry: the radii of the arc and x and y which are the final point in the arc.

For example, if you have a circle centred on (cx, cy) with radius r, you can create and arc around it, d units from the edge of the circle with:

<path d="M cx cy+r+d A r+d r+d 0 0 0 cx+r+d cy" />

This arc will be in the lower, right quadrant because of where it starts (cx, cy+r+d) and ends (cx+r+d, cy).

So call the radius of the inner arc r and the radius of the outer arc r + d. Now we need to know where to start and stop the arc. The x-coordinate of the start and stop points is d units to the left of the cx. We can find the y-coordinate by using Pythagoras's theorem to calculate the height of the triangle with a hypotenuse of r+d and a base of d: h = sqrt((r + d)^2 - d^2).

The code for the arc will therefore be:

d="M cx-d, 50 L cx-d, cy-h A r+d r+d 0 0 0 cx-d, cy+h L cx-d, 240"

For example, with (cx, cy) = (100, 150), r = 50, and d = 10

<path d="M100,50 L 100,100 A 50,50 0 1,0 150,150 L 200 150" style="stroke:#000; stroke-width:6; fill:none;" />
<path d="M 90,50 L 90,90.8 A 60,60 0 0,0 90,209.1 L 90, 240.5" style="stroke:#000; stroke-width:1; fill:none;" />
<circle cx="100" cy="150" r="40" stroke="black" stroke-width="1" fill="green" />

Does that make sense?