The Arc Command Under the Microscope

SVG is great for crisp, scalable graphics, but hand-writing the code that produces those graphics often feels like a different story. The <path> element is where SVG gets really expressive, and its arc command (A) is one of the more intimidating pieces of syntax. Once you break it down, though, it’s a surprisingly flexible tool for drawing the kinds of curves that geometric primitives can’t handle.

Before digging into arcs, it helps to be comfortable with the SVG viewBox. Think of the browser window as a camera and the viewBox as the lens. The viewBox has four values—x, y, width, and height—that define which part of the drawing canvas is visible. Changing those values moves the camera or zooms in and out, but it never resizes the actual canvas. If your <svg> element is 600px square and your viewBox is set to -300 -300 600 600, you’re simply framing the center of that canvas.

With that context, you can start using a <path> to draw custom shapes. Unlike <circle> or <polygon>, a <path> is a flexible container that mixes multiple drawing commands. A basic example places a path inside the SVG:

<svg width="600px" height="600px" viewBox="-300 -300 600 600">
  <path d="M 0 0 A 100 100 0 1 1 200 0" 
    fill="transparent"
    stroke="black"
    stroke-width="24"
  />
</svg>

That string of numbers looks cryptic, but it’s manageable if you read it in pieces:

  • M 0 0 moves the pen to the center of the viewBox, drawing nothing yet.
  • A 100 100 0 1 1 200 0 draws an arc with a radius of 100 along both the X and Y axes, ending at (200, 0).

Those two points along the X-axis are connected by a curved line — that’s your first arc.

Parsing the Parameters

Breaking the arc command into its parts makes it clear what each number controls. There are two pairs of coordinates for the movement and endpoint, followed by three parameters that act as switches:

  • Start point (M): x and y coordinates.
  • Radii: first two numbers after A set the radius in the X and Y directions. Equal values yield a circular arc; different values make it an elliptical one.
  • Endpoint: the final two numbers are the arc’s destination x and y coordinates.
  • Rotation: the third parameter in the A command, this rotates the arc’s ellipse along the X-axis.
  • Large-arc flag: a Boolean that picks between the small arc (span less than 180°) when set to 0 and the large arc (span greater than 180°) when set to 1.
  • Sweep flag: a Boolean that chooses the arc’s direction, with 0 for clockwise and 1 for counter-clockwise.

Rewriting the original path with those definitions in mind makes the command much less mysterious:

<path d="
  M <x-coordinate> <y-coordinate> 
  A <radius-x> <radius-y> <rotation-x> <large-arc-flag> <sweep-flag> <endpoint-x> <endpoint-y>
" />

Seeing the Flags in Action

Even with fixed endpoints and radii, those two Boolean flags combine to produce four distinct arcs connecting the same two points. That’s because the large-arc and sweep flags each have two possible values, yielding four valid paths. Changing which of the two arcs you want and whether it sweeps clockwise or counter-clockwise is what lets you pick the exact curve you need.

Rotation is another powerful control. It rotates the underlying ellipse around its center. The effect is invisible on a perfect circle, but for an ellipse with unequal radii it changes the arc’s tilt relative to the axes.

Parameter Shuffling

From any starting path, you can produce an infinite number of arcs between two points by adjusting parameters. For instance, changing the arc’s endpoint coordinates in the X or Y direction (ex and ey) shifts where the curve lands without altering its shape. Modifying the radii in the X (rx) or Y (ry) direction manipulates the height or width of the curve. And you can also change both endpoint and radii together to get more drastic variations.

See the Pen [4 cases [forked]](https://codepen.io/smashingmag/pen/wBwWQOb) by akshaygpt.

See the Pen 4 cases [forked] by akshaygpt.

Mastering arcs means understanding how those values interact. Play with the radii, try the rotation, and flip the flags to see how the curve responds. With that practice, arcs become a reliable part of your SVG toolkit, letting you build dynamic and intricate designs by hand.