Arcs #1

Example 1 Example 2 Example 3 Example 3.1 Example 3.2 Example 4 Example 5 Example 6

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.

7 parameters are required:

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.