SVG Tutorial / The Path Element / Day 9

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.

20°150120145, 174288, 314
<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.

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

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

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

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

-100, -100
-40, -40 40, 40 -40, -40 40, 40
200, 200 
<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

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

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.

-100, -100
-40, -40 40, 40 -40, -40 40, 40
200, 200 
<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

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

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.

-100, -100
-40, -40 40, 40 -40, -40 40, 40
200, 200 
<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

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

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.

-100, -100
-40, -40 40, 40 -40, -40 40, 40
200, 200 
<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

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

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.

-100, -100
-40, -40 40, 40 -40, -40 40, 40
200, 200 
<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

We can draw a moon icon with 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.

Hover over the coordinates in the code or on the image to see how they are positioned.

0, 0
23, 5 23, 25 23, 5 23, 5 23, 25 23, 5
30, 30 
<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>

These two arcs look very different despite using the same radiuses and positions. 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. The first goes counterclockwise (as it goes down), and the second goes clockwise (as it goes up).

Drawing a Candy Cane

After all these introductions, we finally got to today’s example. We are going to draw a candy cane in three layers.

-100, -200
50, 120 50, -80 -50, -80 50, 120 50, -80 -50, -80
200, 400 
<svg
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="black"
    stroke-width="45"
    stroke-linecap="round"
  />
</svg>

To draw the 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 outline of the other.

-100, -200
50, 120 50, -80 -50, -80 50, 120 50, -80 -50, -80 50, 120 50, -80 -50, -80 50, 120 50, -80 -50, -80
200, 400 
<svg
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="black"
    stroke-width="45"
    stroke-linecap="round"
  />


  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="red"
    stroke-width="35"
    stroke-linecap="round"
  />
</svg>

Then, finally, we draw the same path again, but this time in white, and we use the stroke-dasharray property to draw a dashed line.

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="black"
    stroke-width="45"
    stroke-linecap="round"
  />


  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="red"
    stroke-width="35"
    stroke-linecap="round"
  />


  <path
    d="
        M 50 120
        L 50 -80
        A 50 50 0 0 0 -50 -80"
    fill="none"
    stroke="white"
    stroke-width="35"
    stroke-dasharray="30 30"
  />
</svg>

Bonus: Drawing a Lightbulb

For a more advanced example, we can draw a lightbulb. We start with an arc that will be the bulky part of the lightbulb.

-100, -100
-30, 20 30, 20 -30, 20 30, 20
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -30 20
      A 50 50 0 1 1 30 20"
    fill="gold"
    stroke="black"
    stroke-width="10"
    stroke-linejoin="round"
  />
</svg>

Then, with a quadratic Bézier curve, we continue the shape down, draw the bottom with a line-to segment, and return to the beginning of the path with another quadratic Bézier curve. Hover over the coordinates in the code or on the image to see how they are positioned.

-100, -100
-30, 20 30, 20 20, 30 20, 50 -20, 50 -20, 30 -30, 20 -30, 20 30, 20 20, 30 20, 50 -20, 50 -20, 30 -30, 20
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -30 20
      A 50 50 0 1 1 30 20
      Q 20 30 20 50
      L -20 50
      Q -20 30 -30 20"
    fill="gold"
    stroke="black"
    stroke-width="10"
    stroke-linejoin="round"
  />
</svg>

Finally, we add another contour arc and two lines at the bottom for the cap.

-100, -100
-30, 20 30, 20 20, 30 20, 50 -20, 50 -20, 30 -30, 20 -30, -20 0, -50 -18, 62 18, 62 -15, 75 15, 75 -30, 20 30, 20 20, 30 20, 50 -20, 50 -20, 30 -30, 20 -30, -20 0, -50 -18, 62 18, 62 -15, 75 15, 75
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -30 20
      A 50 50 0 1 1 30 20
      Q 20 30 20 50
      L -20 50
      Q -20 30 -30 20"
    fill="gold"
    stroke="black"
    stroke-width="10"
    stroke-linejoin="round"
  />
  <path
    d="
      M -30 -20
      A 30 30 0 0 1 0 -50"
    fill="none"
    stroke="black"
    stroke-width="10"
    stroke-linecap="round"
  />
  <path
    d="
      M -18 62
      L 18 62
      M -15 75
      L 15 75"
    stroke="black"
    stroke-width="10"
    stroke-linecap="round"
  />
</svg>