Arcs

Last but certainly not least is the A or arc command.

The arc command lets you draw a section of an ellipse using the following (admittedly confusing) syntax:

A rx ry rotation large-arc-flag sweep-flag x y

As an example, the arc that you see here is drawn using the following commands:

1. M3.010.0
2. A10.07.50.00.00.020.015.0

We'll dive into what each of these values means in a moment, but first, try to change the controls in the sandbox to get a feel for how the arc command works.

How Arcs Are Formed

1. M3.010.0
2. A10.07.50.00.00.020.017.0

Let's talk about the first and last pairs of the arc command: (rx,ry) and (x,y). These points, along with the initial cursor position, determine the ellipse that the arc is drawn on.

To draw an arc, the browser will take these three points and tries to find an ellipse that "fits" — that is, an ellipse with radii rx and ry and with both of the points on its circumference.

Try changing the radius of the arc or the position of the endpoint in the sandbox. Notice that the ellipse will change to always fit the two points and the provided radii.

This (x,y) pair is what confused me when I first learned the arc command. Intuitively, I would've thought that I'd need an angle to draw an arc, not an endpoint!

Of course, it's not always possible to find a matching ellipse. What happens in that case? Click the "Shrink Arc" button below and let's find out:

Notice that when the ellipse isn't big enough to fit the arc's points, the arc isn't affected — it still follows the ellipse's curve. This suggests that the ellipse is implicitly scaled to fit the arc!

In the playground, this "scaled" ellipse is shown in light gray.

X-Axis Rotation

The next argument, x-axis-rotation, is thankfully not as tricky. As you might expect, this value rotates the ellipse around its x, or horizontal, axis.

1. A10.07.530.00.00.020.017.0

The best way to get a feel of this argument is to play around with it, so try changing the value above to see how it affects the arc.

Large Arc and Sweep Flags

1. A8.08.00.00.00.018.018.0

The next two arguments may look like numbers, but they're actually flags — that is, they can only be 0 or 1. While their official names are "large arc flag" and "sweep flag" respectively, I prefer to call them the large arc and clockwise flags instead.

In the ellipse section, we said that the browser tries to find an ellipse that fits the arc's points and then draws the curve on that ellipse. What I didn't mention was that there will always be four possible curves that can be drawn between any pair of points!

The large arc and clockwise (sweep) flags control which of these four curves is ultimately drawn.

Sweep

Out of the four arcs that can be drawn between two points, two of the arcs are drawn clockwise:

While the other two are drawn counterclockwise:

The sweep flag controls which of these two directions is drawn, with 0 meaning the arc is drawn counterclockwise. This is why I prefer to call the sweep flag the clockwise flag!

Try toggling the sweep flag below and notice how the arc goes from counterclockwise to clockwise:

Large Arc

The sweep flag alone isn't enough though — we still have two arcs remaining to choose from! This is where the large-arc flag comes in.

Notice that, out of the two remaining arcs, one of them is larger than the other. When the large-arc flag is 0, the smaller arc is drawn; toggling the flag to 1 will draw the larger arc instead.

When the ellipse happens to be a perfect circle (i.e. when rx == ry), then the large arc flag has no effect.

Summary

Here's the arc command in its entirety:

• The arc is a portion of an ellipse;
• The arc is drawn from the current cursor position to the x and y values;
• The rx and ry values control the size of the ellipse;
• The x-axis-rotation value rotates the ellipse around its x-axis;
• The large-arc-flag and sweep-flag values control which of the four possible arcs are drawn.

You can play around with the different fields in the sandbox to get a better feel of how they change the shape of the arc.

Practice

And with that, we've covered all of the commands in the SVG path syntax! As a final "capstone" exercise, let's try to draw this fingerprint icon using all the commands we've learned so far.

Remember — there's no right answer here, as long as the path ends up looking like how we want it to!

Credit where credit is due: this icon is a trace of the fingerprint icon from heroicons with fewer commands and more rounded numbers.