Besides simple rectangles, triangles, and other poly-sided shapes, we can also create arcs or curves.
Starting with a path command, we use the a or A command to draw elliptical arcs - sections of an ellipse that connect 2 points.
Note that an ellipse may have an equal x and y radius - thus becoming a circular arc.
- a is used for relative coordinates
- A is used for absolute coordinates
7 parameters are required:
- [1,2]x and y radius of the ellipse
- [3]x-axis-rotation of the ellipse
- [4]large-arc-flag:
0 if arc's measure is < 180 degrees
1 if arc's measure is >= 180 degrees
- [5]sweep-flag:
0 if arc drawn in negative angle direction
1 if arc drawn in positive angle direction
- [6,7]ending x and y coordinates
In Example 1 we use small a to specify relative coordinates.
<path d="M40,60
a35,25 0 0 1 60,0"
fill="none" stroke="red" stroke-width="5"/>
In Example 2, we use A to specify absolute coordinates.
<path d="M170,70
A40,20 0 0 1 300 70"
fill="none" stroke="blue" stroke-width="5"/>
Example 3 introduces Z - the closepath command. Use this command instead of drawing a line to the beginning point.
<path d="M300,30
A40,20 0 0 1 350 200 Z"
fill="none" stroke="green" stroke-width="5"/>
Example 3.1 shows how a circle can be created by specifying the x and y radius the same. Normally we would use the circle command, as in Example 3.2.
<path d="M40,200
a40,40 0 1, 1 10 1 Z"
fill="none" stroke="black" stroke-width="5"/>
Example 3.2
<circle cx="200" cy="160" r="40"
fill="none" stroke="#E112FF" stroke-width="5"/>
Example 4 combines several individual curves into one. Each curve is colored differently to distinguish it.
<path d="M60,300
a35,35 0 0, 1 60,0"
fill="none" stroke="red" stroke-width="3"/>
<path d="M120,300
a35,35 0 0, 0 60,0"
fill="none" stroke="black" stroke-width="3"/>
<path d="M180,300
a35,35 0 0, 1 60,0"
fill="none" stroke="red" stroke-width="3"/>
<path d="M240,300
a35,35 0 0, 0 60,0"
fill="none" stroke="black" stroke-width="3"/>
<path d="M300,300
a35,35 0 0, 1 60,0"
fill="none" stroke="red" stroke-width="3"/>
<path d="M360,300
a35,35 0 0, 0 60,0"
fill="none" stroke="black" stroke-width="3"/>
Create a vertically linked set of arcs as in Example 5.
<path d="M60,350
a5,5 0 0, 0 0,35"
fill="none" stroke="green" stroke-width="3"/>
<path d="M60,385
a5,5 0 0, 1 0,35"
fill="none" stroke="blue" stroke-width="3"/>
<path d="M60,420
a5,5 0 0, 0 0,35"
fill="none" stroke="green" stroke-width="3"/>
<path d="M60,455
a5,5 0 0, 1 0,35"
fill="none" stroke="blue" stroke-width="3"/>
Finally with Example 6, we link arcs on an angular path.
<path d="M200,350
a50,20 0 0,0 20 35"
fill="none" stroke="grey" stroke-width="3"/>
<path d="M220,385
a50,20 0 0,1 20 35"
fill="none" stroke="black" stroke-width="3"/>
<path d="M240,420
a50,20 0 0,0 20 35"
fill="none" stroke="grey" stroke-width="3"/>
<path d="M260,455
a50,20 0 0,1 20 35"
fill="none" stroke="black" stroke-width="3"/>
All done.