Drawing a partial circle using SVG arcs

Question

I want to draw a partial arc using SVG. According to the docs , the centre of the circle is calculated automatically. But my arc overflows the circle. It is easier to demonstrate it with a picture:

<svg width="500px" height="500px" viewBox="0 0 100 100" style="border: navy solid 1px;"> <g transform="translate(10 10) scale(0.5 0.5)"> <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path> <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path> </g> </svg>

Here is the link to the codepen link.

Answer 1

You can draw arcs before blue circle (as I draw red one) or make redrawing of circle segment (the last line - I made it green to emphasize but must be blue). So combination of circle arc + segment gives moon crescent form

 <path d="M50 50 L50 0 A1 1 0 0 1 100 50 Z" fill="red" opacity="0.7"></path>
 <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
 <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
 <path d="M50 0 A50 50 0 0 0 0 50 Z" fill="green"></path>