So, **I love drawing birds with code.** Inspired by my brother’s love for birdwatching, I admire the uniqueness of their feathers, colors, and sounds. But what I notice most is the way their bodies curve and different birds can have dramatically different curves! So, I took my love for drawing with SVG graphics and used it to experiment with bird shapes. Over time, I’ve drawn enough to become incredibly adept at working with arc shapes.

Here are a few of my recent works. Inspired by designs I came across on [Dribbble](https://dribbble.com), I created my versions with code. You can browse through the code for each on my [CodePen](https://codepen.io/akshaygpt).

But before we dive into creating curves with arcs, please pause here and check out Myriam Frisano’s recent article, “[SVG Coding Examples: Useful Recipes For Writing Vectors By Hand](https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/).” It’s an excellent primer to the SVG syntax and it will give you solid context heading into the concepts we’re covering here when it comes to mastering **SVG arcs**.

A Quick SVG Refresher

You probably know that SVGs are crisp, infinitely scalable illustrations without pixelated degradation — vectors for the win! What you might not know is that **few developers write SVG code.** Why? Well, the syntax looks complicated and unfamiliar compared to, say, HTML. But trust me, once you break it down, it’s not only possible to hand-code SVG but also quite a bit of fun.

Let’s make sure you’re up to speed on the SVG `viewBox` because it’s a key concept when it comes to the _scalable_ part of \*SVG. We’ll use the analogy of a camera, lens, and canvas to explain this concept. Think of your browser window as a camera and the SVG `viewBox` as the camera lens focusing on the painting of a bird you’ve created (the SVG). Imagine the painting on a large canvas that may stretch far beyond what the camera captures. The `viewBox` defines which part of this canvas is visible through the camera.

Let’s say we have an SVG element that we’re sizing at `600px` square with `width` and `height` attributes directly on the `

You now have the context you need to learn how to work with `` elements in SVG, which is where we start working with arcs!

The `` Element

We have an `

Let’s take this information and start playing with values to see how it behaves.

Visualizing The Possibilities

Again, if this is the `` we’re starting with:

```

```

Then, we can manipulate it in myriad ways. Mathematically speaking, you can create an infinite number of arcs between any two points by adjusting the parameters. Here are a few variations of an arc that we get when all we do is change the arc’s endpoints in the X (``) and Y (``) directions.

See the Pen [Arc Possibilities b/w 2 points \[forked\]](https://codepen.io/smashingmag/pen/WbexYLV) by [akshaygpt](https://codepen.io/akshaygpt).

Or, let’s control the arc’s width and height by updating its radius in the X direction (``) and the Y direction (``). If we play around with the `` value, we can manipulate the arc’s height:

See the Pen [Rx \[forked\]](https://codepen.io/smashingmag/pen/xbKOQMr) by [akshaygpt](https://codepen.io/akshaygpt).

Similarly, we can manipulate the arc’s width by updating the `` value:

See the Pen [Ry \[forked\]](https://codepen.io/smashingmag/pen/mybEQvG) by [akshaygpt](https://codepen.io/akshaygpt).

Let’s see what happens when we rotate the arc along its X-axis (``). This parameter rotates the arc’s ellipse around its center. It won’t affect circles, but it’s a game-changer for ellipses.

See the Pen [x-axis-rotation \[forked\]](https://codepen.io/smashingmag/pen/VYZjVRx) by [akshaygpt](https://codepen.io/akshaygpt).

Even with a fixed set of endpoints and radii (`` and ``), and a given angle of rotation, four distinct arcs can connect them. That’s because we have the `` flag value that can be one of two values, as well as the `` flag that is also one of two values. Two boolean values, each with two arguments, give us four distinct possibilities.

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

And lastly, adjusting the arc’s endpoint along the X (``) and Y (``) directions shifts the arc’s location without changing the overall shape.

See the Pen [endx, endy \[forked\]](https://codepen.io/smashingmag/pen/xbKOQeL) by [akshaygpt](https://codepen.io/akshaygpt).

Wrapping Up

And there you have it, SVG arcs demystified! Whether you’re manipulating radii, rotation, or arc direction, you now have all the tools to master these beautiful curves. With practice, arcs will become just another part of your SVG toolkit, one that gives you the power to create **more dynamic, intricate designs** with confidence.

So keep playing, keep experimenting, and soon you’ll be bending arcs like a pro — making your SVGs not just functional but beautifully artistic. If you enjoyed this dive into arcs, drop a like or share it with your friends. Let’s keep pushing the boundaries of what SVG can do!