Another arc

When you draw arcs in SVG, in the d attribute of a <path> element, you have one formula.

There’s a lot of information past the “A” character, and there are a total of four ways you have to connect the start and end coordinates. At the price of these options, however, you lose in clarity. Just what arc will be drawn on screen?

<path d="M 0 0 A 20 10 0 0 0 20 10" />

More often than not, I fail to anticipate the result. Even if you settle on the values for radii and coordinates, even if you grasp the purpose of large-arc-flag, sweep-flag makes it a bit of a toss-up which way the path should go. Should it be “0 0” or “0 1”?

You don’t need to go through an entire article to understand the point: when you draw an arc on the basis of six to seven numbers, you never know what you might get.

And in SVG, that’s all there is to it. You have to accept the verbose, convoluted syntax. The syntax might lead you to a precious visual, but you might long for a better way.

Outside of SVG, there are indeed alternatives. Consider Zdog for instance. The JavaScript library lets you draw shapes with a Shape class.

new Zdog.Shape({
	addTo: illustration,
	path: []
});

In the path property you elaborate the shape similarly to the d attribute, with a series of instructions. These are nested in meaningful objects, and allow to draw arcs with a much clearer logic.

You need just three points. Three sets of coordinates for where the arc begins, a corner point and where the line should end.

The library sketches a rectangle with the control point and elaborates the arc to follow.

One corner point for one arc. One predictable arc. Even with the additional z value, if you brave the third dimension, you know the result just by looking at the numbers.

You lose the flexibility of the flags, but you can very well replicate the features. To change the direction of the smaller arc, adjust the position of the guiding point. To realize the larger shape — alas you can’t do that with one directive —, set up multiple arcs. Three arcs, three corner points tracing the outline of the larger figure.

The path is possibly longer, but still explicit. You don’t need to toggle the value of a flag, you don’t need to even consider ellipses. If you need an ellipse, by chance, Zdog offers a fitting class.

new Zdog.Ellipse({
	addTo: illustration,
	width: 20,
	height: 10,
	translate: { y: 10 }
});

Ellipse has also a property to draw quarters of the roundish shape. Another convenient instruction to draw a specific type of arc.

new Zdog.Ellipse({
	// ...
	quarters: 1
});

You have options. And another way to draw, to appreciate arcs.