Arcs #3

Example 1 Circle drawn with 2 arcs Example 2 Ellipse drawn with 1 arc Example 3 Ellipse drawn with 1 arc Example 4 Circle drawn with 1 arc

Closed Arcs

Here we show different ways to create closed curves using the a command. Example 1 uses 2 a commands - the 2nd starting where the first finished. Note the negative value of the x-axis ending coordinate.

<path d="M 100, 100 m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0"
fill="none" stroke="orange" stroke-width="2"
/>

Example 2 and Example 3 show a closed ellipse drawn with 1 a command, but including a z command to close the curve.

<path d="M350,240 a50,100 0 1, 1 10 1 z" fill="none" stroke="blue" stroke-width="2"/>

<path d="M260,300 a50,100 90 1, 1 0 1 z" fill="none" stroke="red" stroke-width="2"/>

The circle in Example 4 is also drawn with a single a command and also includes the close command z.

<path d="M60,300
a40,40 0 1, 1 10 1 z"
fill="orange" stroke="black" stroke-width="1"/>