Day 14: How to Draw an Arc with SVG

An arc is a segment of a circle or an ellipse. In SVG, we can draw an arc using the <path> element with the A command. Like other path segments, the arc to command continues the previous segment. In this example, we use the M command to move to the starting point, and from there, we draw an arc.

Drag the handlers below to see how it works, or go to the editor.

<svg width="450" height="450" >
  <path 
    d="M 145 174
Start Position A 150
Radius X 120
Radius Y 20
Rotation 0
Large Arc Flag 0
Sweep Flag 288 314
End Position " 
    stroke="#fa3838" stroke-width="20" fill="none" 
  />
</svg>

The different parameters of an SVG arc

The arc command continues the previous path segment. It does not define where the arc starts; that information comes from the previous command. That’s why the following examples start with the M command to move to the start of the arc.

The arc’s endpoints are the last two parameters of the A command, x and y. That’s the only coordinate the arc defines. For instance, we don’t set the center point of the arc. All the rest of the parameters define how to reach this endpoint.

Horizontal and Vertical Radiuses

The first two parameters are the imaginary circle’s horizontal and vertical radius. If we draw a circle, those two values are the same.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -40 -40
      A 70 70 0 0 0 40 40"
    fill="none"
    stroke="red"
    stroke-width="5"
  />
</svg>

Sweep Flag

With the given radiuses, four different ways to reach the arc’s endpoint exist. Remember, we don’t set the center of the arc. The arc could go both clockwise and counterclockwise. The fifth argument is a boolean flag, which flips the arc the other way.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -40 -40
      A 70 70 0 0 1 40 40"
    fill="none"
    stroke="red"
    stroke-width="5"
  />
</svg>

Large Arc Flag

In both cases, the arc has reached its endpoint in the shortest possible way. However, it is also possible to go the long way and keep the same start, endpoint, and radiuses. The fourth argument is another boolean flag that sets whether the arc should go the short way or the the long way.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -40 -40
      A 70 70 0 1 1 40 40"
    fill="none"
    stroke="red"
    stroke-width="5"
  />
</svg>

Drawing an Elliptic Arc

We draw an elliptic arc if we set the horizontal and vertical radiuses to two different values. The start and end points are still the same, and elliptic arcs have four different variations.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -40 -40
      A 70 40 0 1 1 40 40"
    fill="none"
    stroke="red"
    stroke-width="5"
  />
</svg>

Rotating an Elliptic Arc

We can turn our imaginary ellipse by an angle when we draw an elliptic arc. The third parameter allows us to set an angle in degrees. Note that the arc maintains the same start and endpoint while its center position moves.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -40 -40
      A 70 40 30 1 1 40 40"
    fill="none"
    stroke="red"
    stroke-width="5"
  />
</svg>

Drawing a Moon Icon

After drawing a Sun Icon it’s time to draw a Moon icon. You can also check out this YouTube tutorial that covers this icon in more details.

In this example, we draw a single path. We start with a move-to command to get to the starting position (upper corner). Then, we draw two arcs. We draw a longer arc to get down to the bottom corner and then return to the starting position with a shorter arc.

<svg 
  width="200"
  height="200"
  viewBox="0 0 30 30"
>
  <path
    d="
    M 23, 5
    A 12 12 0 1 0 23, 25
    A 12 12 0 0 1 23, 5"
  />
</svg>

Note how these two arcs look very different despite using the same radiuses. The large arc flag and the sweep flag mirror each other. The first arc goes the long way between the two endpoints, and the second goes the short way. Note that the first one goes counterclockwise (as it goes down), and the second goes clockwise (as it goes up).

Drawing a Candy

Now after all these introductions we finally got to today’s example. We are only going to draw a simple arc in this one.

<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <path
    class="body" 
    d="
      M 50 120
      L 50 -80
      A 50 50 0 0 0 -50 -80"
    stroke="#cd803d"
    stroke-width="45"
  />
</svg>

.body {
  stroke-linecap: round;
  fill: none;
}

To draw a candy, we draw a thick line that consists of a straight line and a half circle. Then we draw the same line again, with a slightly thinner stroke width. By setting two different colors for them, they will look as if one is the border of the other.

For the finishing touches, we add a few straight lines inside this shape as markings.

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <path
    class="body"
    d="
      M 50 120
      L 50 -80
      A 50 50 0 0 0 -50 -80"
    stroke="#cd803d"
    stroke-width="45"
  />

  <path
    class="body"
    d="
      M 50 120
      L 50 -80
      A 50 50 0 0 0 -50 -80"
    stroke="white"
    stroke-width="40"
    class="body"
  />

  <line class="green-mark" x1="-35" y1="-90" x2="-60" y2="-100" />
  <line class="red-mark" x1="-15" y1="-115" x2="-25" y2="-135" />
  <line class="green-mark" x1="20" y1="-110" x2="35" y2="-130" />
  <line class="red-mark" x1="40" y1="-60" x2="60" y2="-80" />
  <line class="green-mark" x1="40" y1="-10" x2="60" y2="-30" />
  <line class="red-mark" x1="40" y1="40" x2="60" y2="20" />
  <line class="green-mark" x1="40" y1="90" x2="60" y2="70" />
</svg>

.body {
  stroke-linecap: round;
  fill: none;
}

.red-mark {
  stroke: #d1495b;
  stroke-width: 2.5px;
}

.green-mark {
  stroke: #234236;
  stroke-width: 2.5px;
}