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, I created my versions with code. You can browse through the code for each on my CodePen.
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.” 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
<svg width="600px" height="600px">
Let’s turn our attention to the viewBox attribute:
<svg width="600px" height="600px" viewBox="-300 -300 600 600">
The viewBox attribute defines the internal coordinate system for the SVG, with four values mapping to the SVG’s x, y, width, and height in that order.
Here’s how this relates to our analogy:
-
Camera Position and Size
The -300, -300 represents the camera lens’ left and top edge position. Meanwhile, 600 x 600 is like the camera’s frame size, showing a specific portion of that space.
-
Unchanging Canvas Size
Changing the x and y values adjusts where the camera points, and width and height govern how much of the canvas it frames. It doesn’t resize the actual canvas (the SVG element itself, which remains at 600×600 pixels). No matter where the camera is positioned or zoomed, the canvas itself remains fixed.
So, when you adjust the viewBox coordinates, you’re simply choosing a new area of the canvas to focus on without resizing the canvas itself. This lets you control the visible area without changing the SVG’s actual display dimensions.
You now have the context you need to learn how to work with
The
We have an viewBox.
A
With a single
Here’s a quick, no-frills example that places a
<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>
Let’s take this information and start playing with values to see how it behaves.
Visualizing The Possibilities
Again, if this is the
<path d="M 0 0 A 100 100 0 1 1 200 0"/>
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 (
See the Pen Arc Possibilities b/w 2 points [forked] by akshaygpt.
Or, let’s control the arc’s width and height by updating its radius in the X direction (
See the Pen Rx [forked] by akshaygpt.
Similarly, we can manipulate the arc’s width by updating the
See the Pen Rx [forked] by akshaygpt.
Let’s see what happens when we rotate the arc along its X-axis (
See the Pen x-axis-rotation [forked] by akshaygpt.
Even with a fixed set of endpoints and radii (
See the Pen 4 cases [forked] by akshaygpt.
And lastly, adjusting the arc’s endpoint along the X (
See the Pen endx, endy [forked] by 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!
