<path /> (Path-Arcs)

Objective: Learn to use the path element to draw arcs and shapes that need arcs

The drawing commands for  <path />  arcs are A,a.

The drawing instructions for an arc are:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y (absolute coordinates)

 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy (relative coordinates)

This is complicated! To explain this clearly the drawing command arguments are in the following sequence.

17.1 Move and Line Draw Commands

A defines an absolutely positioned arc and a is a relatively positioned arc.

rx ry This is the x radius and y radius of the arc. This is the same as used in ellipse. If you want a circular arc rx and ry must be the same value.

axis-rotation. Set this to 0 by default. (This only works with ellipse arcs not circles)

large-arc-flag. Set this to 0 by default. This defines if an arc should be greater or less than 180 degrees.

sweep-flag. Set this to 0 by default. This determines if the Arc should move at negative angles or positive angles.

x y  or dx dy. These are the end coordinates of the Arc. They can be absolute or relative.

Arc properties are complicated but there are a number of tricks to make things easier. Generally it is best to draw Arc paths SVG editing program and then hand tune them if required. However you should still have an understanding of the drawing commands.

Important Fact

You cannot draw a circle with the path Arc. You must stop at 99.x% of a circle (Eg: around 356°). If you use the same start and end co-ordinates the Arc will not draw.

17.2 Arc drawing basics

We are going to start with a 90° circular arc using absolute coordinates and then change the properties.

The blue circle is drawn using an SVG circle centered at 200,200 with a radius of 100. We are going to draw a 90° arc matching the blue circle.

To get started we are going to use the rx ry and x y drawing commands with the other three set to zero. Here it is:

 <path d="M 200 100 A100 100, 0, 0, 0, 300 200 Z" fill="none" stroke="black" stroke-width="4" />

The drawing position is moved using M to x,y  200,100. This is the Arc starting point.

The X and Y radiuses are both set to 100. This must be done to draw a circular Arc.

The end drawing position is set to 300, 200 which is 100px from the center of the viewBox.

17.3 TRY THIS

Now use the <path /> drawing instructions to experiment with the different options for the large-arc-flag and sweep-flag to see how these effectively draw two circles.

Change the large-arc-flag to 1. 1 means draw the large arc. 0 means draw the small arc.

Change the sweep-flag to 1. 1 means draw it clockwise. 0 means draw it anti-clockwise.

Invert the path drawing points and repeat the above. (EG: d="M 200 100 A100 100, 0, 1, 1, 300 200"

Add Z to the end of the path to draw a line across the bottom of the arc. (Eg: d="M 200 100 A100 100, 0, 1, 1, 300 200 Z"

Change the rx  value to 150 and experiment with the large-arc-flag and sweep-flag

Do the same with the ry value. Here is kitset to play with.

17.4 Elliptical Arcs and axis-rotation

Next we are going to draw an elliptical arc on a line and adjust the axis-rotation by setting the rotation in degrees. (Remember axis-rotation has no visual effect  with circular arcs).

The blue dotted line has no axis-rotation applied so the arc is drawn vertically.

d="M 0 400 150,250 A75 100, 0, 1, 1, 250,150 L400,0"

Here we have created the ellipse by specifying A75 100. Two different radius's.

The thin black line has had -45° of axis rotation applied to the elliptical arc so it now at "right angles" with the 45° line.

d="M 0 400 150,250 A75 100, -45, 1, 1, 250,150 L400,0"

Spend some time experimenting with the different drawing instruction values until you are comfortable with them. You can also draw the line and arc horizontally and rotate it with a transform="rotate(-45,200,200)" instruction. That is coming in a future lesson.

17.5 Arc Summary

You are using coordinate geometry to draw Arcs. It is usually important to know what you are trying to draw before typing in the Arc path values.

You have to know the start and end coordinates and radius before doing anything else. You can use a construction circle placed in the correct position to get your Arc position correct.

When dawing circular Arcs it is best to leave the large-arc-flag and sweep-flag at 0. That way you are drawing an Arc on a circle.

17.6 SVG Editor: Let's Draw something with arcs

Arcs are important for basic geometry to illustrate properties of circles,  pie charts or segment drawings.

The best way to draw arcs is to use the zero position and then position and rotate them with transforms. In the drawing below there is one 45° sector arc that has been used multiple times.

You can use your school trigonometry to calculate the x,y position or as has been done here, put a line with a 45° rotation and read the coordinates off the grid. Remember you can zoom the viewbox for a more accurate reading.

Here is the path using relative coordinates. 

 d="M 200 200 200,40 a160 160, 0, 0, 1, 113,47 Z"

We started in the centre of the viewBox, draw a line up to the arc start position, draw the arc and close the path with Z.

The arc end positions are relative to the start drawing point. The  relative x position of 113 comes from 160 x 0.707 (Sin 45°) = 113.12.  The relative y position of 47 is 160 - 113 .12 = 46.88. Both numbers have been rounded to the nearest pixel. 

We give the sector a nice ID and get to work with the <use /> element. 

If your source arc is part of the diagram you can <use /> as you like. In this example we have put it in a <symbol /> element.

The arc is now inside a  <symbol>...</symbol> tag and we give it a good unique ID. If you are not going to change any styling on the sector you can use it without putting it in a <symbol /> tag. If you want to colour it as we have here you will need to make sure applied styles don't clash. 

 We can now repeat the arc many times with this statement and change the  rotation. 

 <use x="0" y="0" href="#nice-45" transform="rotate(90,200,200)"></use>

With the <use /> element x and y coordinates are relative so we set them to zero. That means the arc shape is starting from the same position the sector was drawn in the symbol The rotate transform is then carried out from the center of the viewBox at different multiples of 45 degrees. This could be any angle of course.

We also added transform="translate(10,25)" into the blue sector to break it away from the circle.

17.7 Getting Arc Arty

Let's draw a cloud bank using arcs. You should have a few clouds in you standard shapes library ready to cut and paste into a drawing at any time. Here is an example:

path id="cloud1"
d="M 0 100
A25 50, 0, 0, 1, 50 100
A40 50, 0, 0, 1, 110 80
A40 50, 0, 0, 1, 140 80
A35 30, 0, 0, 1, 180 50
A25 40, 0, 0, 1, 220 70
A30 50, 0, 0, 1, 250 80
A30 50, 0, 0, 1, 290 70
A30 30, 0, 0, 1, 320 90
A20 20, 0, 0, 1, 340 100
A20 30, 0, 0, 1, 380 90
A20 20, 0, 0, 1, 400 100
V150 H0 Z
></path>

This was designed on the graph paper, the units plotted and then drawn with the arc x y radius sizes at 50 50. These  were then "fiddled" to get the final look.

Drawn with two rectangles for the sky and ground it looks like this.

 Using the power of the <use /> element it is possible to turn this into a relatively complex cloudy sky in just a few minutes.

17.8 Exercises

1. Practice using the SweepFlag and LargeArcSweepFlag until you understand what they do.
2. Draw a pie chart with four equal parts, with one part separated out by 10px.
3. Draw a pie chart with  sectprs at different angles.
4. Draw a simple stand-alone cloud and add it to your shape library.