So, I love drawing birds with code. Inspired by my brothers 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, Ive 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 Frisanos recent article, SVG Coding Examples: Useful Recipes For Writing Vectors By Hand. Its an excellent primer to the SVG syntax and it will give you solid context heading into the concepts were covering here when it comes to mastering SVG arcs.A Quick SVG RefresherYou 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, its not only possible to hand-code SVG but also quite a bit of fun.Lets make sure youre up to speed on the SVG viewBox because its a key concept when it comes to the scalable part of *SVG. Well 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 youve 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.Lets say we have an SVG element that were sizing at 600px square with width and height attributes directly on the <svg> element. <svg width="600px" height="600px">Lets 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 SVGs x, y, width, and height in that order. Heres how this relates to our analogy:Camera Position and SizeThe -300, -300 represents the camera lens left and top edge position. Meanwhile, 600 x 600 is like the cameras frame size, showing a specific portion of that space.Unchanging Canvas SizeChanging the x and y values adjusts where the camera points, and width and height govern how much of the canvas it frames. It doesnt resize the actual canvas (the SVG element itself, which remains at 600600 pixels). No matter where the camera is positioned or zoomed, the canvas itself remains fixed.So, when you adjust the viewBox coordinates, youre 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 SVGs actual display dimensions.You now have the context you need to learn how to work with <path> elements in SVG, which is where we start working with arcs!The <path> ElementWe have an <svg> element. And were viewing the elements contents through the lens of a viewBox.A <path> allows us to draw shapes. We have other elements for drawing shapes namely <circle>, <line>, and <polygon> but imagine being restricted to strict geometrical shapes as an artist. Thats where the custom <path> element comes in. Its used to draw complex shapes that cannot be created with the basic ones. Think of <path> as a flexible container that lets you mix and match different drawing commands.With a single <path>, you can combine multiple drawing commands into one smooth, elegant design. Today, were focusing on a super specific path command: arcs. In other words, what were doing is drawing arc shapes with <path>.Heres a quick, no-frills example that places a <path> inside the <svg> example we looked at earlier:<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>Lets take this information and start playing with values to see how it behaves.Visualizing The PossibilitiesAgain, if this is the <path> were starting with:<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 arcs endpoints in the X (<ex>) and Y (<ey>) directions.See the Pen Arc Possibilities b/w 2 points [forked] by akshaygpt.Or, lets control the arcs width and height by updating its radius in the X direction (<rx>) and the Y direction (<ry>). If we play around with the <rx> value, we can manipulate the arcs height:See the Pen Rx [forked] by akshaygpt.Similarly, we can manipulate the arcs width by updating the <ry> value:See the Pen Rx [forked] by akshaygpt.Lets see what happens when we rotate the arc along its X-axis (<rotation>). This parameter rotates the arcs ellipse around its center. It wont affect circles, but its a game-changer for ellipses.See the Pen x-axis-rotation [forked] by akshaygpt.Even with a fixed set of endpoints and radii (<rx> and <ry>), and a given angle of rotation, four distinct arcs can connect them. Thats because we have the <arc> flag value that can be one of two values, as well as the <sweep> 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] by akshaygpt.And lastly, adjusting the arcs endpoint along the X (<ex>) and Y (<ey>) directions shifts the arcs location without changing the overall shape.See the Pen endx, endy [forked] by akshaygpt.Wrapping UpAnd there you have it, SVG arcs demystified! Whether youre 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 youll 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. Lets keep pushing the boundaries of what SVG can do!