{"id":963,"date":"2025-06-23T10:00:00","date_gmt":"2025-06-23T10:00:00","guid":{"rendered":"http:\/\/www.computercoursesonline.com\/?p=963"},"modified":"2025-06-26T20:57:36","modified_gmt":"2025-06-26T20:57:36","slug":"decoding-the-svg-path-element-curve-and-arc-commands","status":"publish","type":"post","link":"http:\/\/www.computercoursesonline.com\/index.php\/2025\/06\/23\/decoding-the-svg-path-element-curve-and-arc-commands\/","title":{"rendered":"Decoding The SVG <code>path<\/code> Element: Curve And Arc Commands"},"content":{"rendered":"<p>              <title>Decoding The SVG &lt;code&gt;path&lt;\/code&gt; Element: Curve And Arc Commands<\/title><\/p>\n<article>\n<header>\n<h1>Decoding The SVG &lt;code&gt;path&lt;\/code&gt; Element: Curve And Arc Commands<\/h1>\n<address>Myriam Frisano<\/address>\n<p>                  2025-06-23T10:00:00+00:00<br \/>\n                  2025-06-26T20:32:27+00:00<br \/>\n                <\/header>\n<p>In the <a href=\"https:\/\/www.smashingmagazine.com\/2025\/06\/decoding-svg-path-element-line-commands\/\">first part of decoding the SVG <code>path<\/code> pair<\/a>, we mostly dealt with converting things from semantic tags (<code>line<\/code>, <code>polyline<\/code>, <code>polygon<\/code>) into the <code>path<\/code> command syntax, but the <code>path<\/code> element didn\u2019t really offer us any new shape options. This will change in this article as we\u2019re learning how to draw <strong>curves<\/strong> and <strong>arcs<\/strong>, which just refer to parts of an ellipse.<\/p>\n<h2 id=\"tl-dr-on-previous-articles\">TL;DR On Previous Articles<\/h2>\n<p>If this is your first meeting with this series, I recommend you familiarize yourself with the <a href=\"https:\/\/www.smashingmagazine.com\/2024\/09\/svg-coding-examples-recipes-writing-vectors-by-hand\/\">basics of hand-coding SVG<\/a>, as well as <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Reference\/Element\/marker\">how the <code>&lt;marker&gt;<\/code> works<\/a> and have a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Reference\/Element\/animate\">basic understanding of animate<\/a>, as this guide doesn\u2019t explain them. I also recommend knowing about the <code>M\/m<\/code> command within the <code>&lt;path&gt;<\/code> <code>d<\/code> attribute (I wrote the aforementioned <a href=\"https:\/\/www.smashingmagazine.com\/2025\/06\/decoding-svg-path-element-line-commands\/\">article on path line commands<\/a> to help).<\/p>\n<p><strong>Note<\/strong>: <em>This article will solely focus on the syntax of curve and arc commands and not offer an introduction to <code>path<\/code> as an element.<\/em><\/p>\n<p>Before we get started, I want to do a quick recap of how I code SVG, which is by using JavaScript. I don\u2019t like dealing with numbers and math, and reading SVG code that has numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and all written out, I have a much better time with this type of code, and I think you will, too.<\/p>\n<p>As the goal of this article is about understanding <code>path<\/code> syntax and not about doing placement or how to leverage loops and other more basic things, I will not run you through the entire setup of each example. I\u2019ll share some snippets of the code, but please note that it may be slightly adjusted from the CodePen or simplified to make the article easier to read. However, if there are specific questions about code not part of the text that\u2019s in the CodePen demos &mdash; the comment section is open, as always.<\/p>\n<p>To keep this all framework-agnostic, the code is written in vanilla JavaScript, though, in practice, TypeScript comes highly recommended when dealing with complex images.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"drawing-b\u00e9zier-curves\">Drawing B\u00e9zier Curves<\/h2>\n<p>Being able to draw lines, polygons, polylines, and compounded versions of them is all fun and nice, but <code>path<\/code> can also do more than just offer more cryptic implementations of basic semantic SVG tags.<\/p>\n<p>One of those additional types is B\u00e9zier curves.<\/p>\n<p>There are multiple different curve commands. And this is where the idea of points and control points comes in.<\/p>\n<blockquote><p><strong>B\u00e9zier math plotting is out of scope for this article.<\/strong><br \/>But, there is a visually gorgeous video by Freya Holm\u00e9r called <a href=\"https:\/\/youtu.be\/aVwxzDHniEw?si=WB_3i88VVJlZS6jf\">The Beauty of B\u00e9zier Curves<\/a> which gets into the construction of cubic and quadratic b\u00e9zier curves that features beautiful animation and the math becomes a lot easier to digest.<\/p><\/blockquote>\n<p>Luckily, SVG allows us to draw quadratic curves with one control point and cubic curves with two control points without having to do any additional math.<\/p>\n<p>So, what is a control point? A control point is the position of the handle that controls the curve. It is not a point that is drawn.<\/p>\n<p>I found the best way to understand these path commands is to render them like a GUI, like Affinity and Illustrator would. Then, draw the \u201chandles\u201d and draw a few random curves with different properties, and see how they affect the curve. Seeing that animation also really helps to see the mechanics of these commands.<\/p>\n<p>This is what I\u2019ll be using markers and animation for in the following visuals. You will notice that the markers I use are rectangles and circles, and since they are connected to lines, I can make use of <code>marker<\/code> and then save myself a lot of animation time because these additional elements are rigged to the system. (And animating a single <code>d<\/code> command instead of <code>x<\/code> and <code>y<\/code> attributes separately makes the SVG code also much shorter.)<\/p>\n<h3 id=\"quadratic-b\u00e9zier-curves-q-t-commands\">Quadratic B\u00e9zier Curves: <code>Q<\/code> &amp; <code>T<\/code> Commands<\/h3>\n<p>The <code>Q<\/code> command is used to draw quadratic b\u00e9ziers. It takes two arguments: the control point and the end point.<\/p>\n<p>So, for a simple curve, we would start with <code>M<\/code> to move to the start point, then <code>Q<\/code> to draw the curve.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">const path = `M${start.x} ${start.y} Q${control.x} ${control.y} ${end.x} ${end.y}`;\n<\/code><\/pre>\n<\/div>\n<p>Since we have the Control Point, the Start Point, and the End Point, it\u2019s actually quite simple to render the singular handle path like a graphics program would.<\/p>\n<p>Funny enough, you probably have never interacted with a quadratic B\u00e9zier curve like with a cubic one in most common GUIs! Most of the common programs will convert this curve to a cubic curve with two handles and control points as soon as you want to play with it.<\/p>\n<p>For the drawing, I created a couple of markers, and I\u2019m drawing the handle in red to make it stand out a bit better.<\/p>\n<p>I also stroked the main <code>path<\/code> with a gradient and gave it a crosshatch pattern fill. (We looked at <code>pattern<\/code> in <a href=\"https:\/\/www.smashingmagazine.com\/2025\/06\/decoding-svg-path-element-line-commands\/\">my first article<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/linearGradient\"><code>linearGradient<\/code><\/a> is fairly similar. They\u2019re both <code>def<\/code> elements you can refer to via <code>id<\/code>.) I like seeing the fill, but if you find it distracting, you can modify the variable for it.<\/p>\n<p>I encourage you to look at the example with and without the rendering of the handle to see some of the nuance that happens around the points as the control points get closer to them.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"LEVXLoJ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Quadratic B\u00e9zier Curve Visual [forked]](https:\/\/codepen.io\/smashingmag\/pen\/LEVXLoJ) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/LEVXLoJ\">SVG Path Quadratic B\u00e9zier Curve Visual [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<blockquote><p><strong>Quadratic B\u00e9ziers are the \u201cless-bendy\u201d ones.<\/strong><br \/>These curves always remain somewhat related to \u201cu\u201d or \u201cn\u201d shapes and can\u2019t be manipulated to be contorted. They can be squished, though.<\/p><\/blockquote>\n<p>Connected B\u00e9zier curves are called \u201cSplines\u201d. And there is an additional command when chaining multiple quadratic curves, which is the <code>T<\/code> command.<\/p>\n<p>The <code>T<\/code> command is used to draw a curve that is connected to the previous curve, so it always has to follow a <code>Q<\/code> command (or another <code>T<\/code> command). It only takes one argument, which is the endpoint of the curve.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">const path = `M${p1.x} ${p1.y} Q${cP.x} ${cP.y} ${p2.x} ${p2.y} T${p3.x} ${p3.y}`\n<\/code><\/pre>\n<\/div>\n<p>The <code>T<\/code> command will actually use information about our control Point <code>cP<\/code> within the <code>Q<\/code> command.<\/p>\n<p>To see how I created the following example. Notice that the inferred handles are drawn in green, while our specified controls are still rendered in red.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"vEOQJBM\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Quadratic Curve T Command [forked]](https:\/\/codepen.io\/smashingmag\/pen\/vEOQJBM) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/vEOQJBM\">SVG Path Quadratic Curve T Command [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<p>OK, so the top curve takes two <code>Q<\/code> commands, which means, in total, there are three control points. Using a separate control point to create the scallop makes sense, but the third control point is just a reflection of the second control point through the preceding point.<\/p>\n<p>This is what the <code>T<\/code> command does. It infers control points by reflecting them through the end point of the preceding <code>Q<\/code> (or <code>T<\/code>) command. You can see how the system all links up in the animation below, where all I\u2019ve manipulated is the position of the main points and the first control points. The inferred control points follow along.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"WbvYENx\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Quadratic B\u00e9zier Spline T Command Visual [forked]](https:\/\/codepen.io\/smashingmag\/pen\/WbvYENx) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/WbvYENx\">SVG Path Quadratic B\u00e9zier Spline T Command Visual [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<p>The <code>q<\/code> and <code>t<\/code> commands also exist, so they will use relative coordinates.<\/p>\n<p>Before I go on, if you do want to interact with a cubic curve, <a href=\"https:\/\/yqnn.github.io\/svg-path-editor\/\">SVG Path Editor<\/a> allows you to edit all path commands very nicely.<\/p>\n<h3 id=\"cubic-b\u00e9zier-curves-c-and-s\">Cubic B\u00e9zier Curves: <code>C<\/code> And <code>S<\/code><\/h3>\n<p>Cubic B\u00e9zier curves work basically like quadratic ones, but instead of having one control point, they have two. This is probably the curve you are most familiar with.<\/p>\n<p>The order is that you start with the first control point, then the second, and then the end point.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">const path = `M${p1.x} ${p1.y} C${cP1.x} ${cP1.y} ${cP2.x} ${cP2.y} ${p2.x} ${p2.y}`;\n<\/code><\/pre>\n<\/div>\n<p>Let\u2019s look at a visual to see it in action.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"EajOvaL\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Cubic B\u00e9zier Curve Animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/EajOvaL) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/EajOvaL\">SVG Path Cubic B\u00e9zier Curve Animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<blockquote><p><strong>Cubic B\u00e9zier curves are contortionists.<\/strong><br \/>Unlike the quadratic curve, this one can curl up and form loops and take on completely different shapes than any other SVG element. It can split the filled area into two parts, while the quadratic curve can not.<\/p><\/blockquote>\n<p>Just like with the <code>T<\/code> command, a reflecting command is available for cubic curves <code>S<\/code>.<\/p>\n<p>When using it, we get the first control point through the reflection, while we can define the new end control point and then the end point. Like before, this requires a spline, so at least one preceding <code>C<\/code> (or <code>S<\/code>) command.<\/p>\n<pre><code class=\"language-javascript\">const path = `    \n  M ${p0.x} ${p0.y}\n  C ${c0.x} ${c0.y} ${c1.x} ${c1.y} ${p1.x} ${p1.y}\n  S ${c2.x} ${c2.y} ${p2.x} ${p2.y}\n`;\n<\/code><\/pre>\n<p>I created a living visual for that as well.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"RNPqZPz\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Cubic B\u00e9zier Spline S Command Visual [forked]](https:\/\/codepen.io\/smashingmag\/pen\/RNPqZPz) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/RNPqZPz\">SVG Path Cubic B\u00e9zier Spline S Command Visual [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<blockquote><p><strong>When to use <code>T<\/code> and <code>S<\/code>:<\/strong><br \/>The big advantage of using these chaining reflecting commands is if you want to draw waves or just absolutely ensure that your spline connection is smooth.<\/p><\/blockquote>\n<p>If you can\u2019t use a reflection but want to have a nice, smooth connection, make sure your control points form a straight line. If you have a kink in the handles, your spline will get one, too.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"arcs-a-command\">Arcs: <code>A<\/code> Command<\/h2>\n<p>Finally, the last type of <code>path<\/code> command is to create arcs. Arcs are sections of circles or ellipses.<\/p>\n<p>It\u2019s my least favorite command because there are so many elements to it. But it is the secret to drawing a proper donut chart, so I have a bit of time spent with it under my belt.<\/p>\n<p>Let\u2019s look at it.<\/p>\n<p>Like with any other <code>path<\/code> command, lowercase implies relative coordinates. So, just as there is an <code>A<\/code> command, there\u2019s also an <code>a<\/code>.<\/p>\n<p>So, an arc path looks like this:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">const path = `M${start.x} ${start.y} A${radius.x} ${radius.y} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;\n<\/code><\/pre>\n<\/div>\n<p>And what the heck are <code>xAxisRotation<\/code>, <code>largeArcFlag<\/code>, and <code>sweepFlag<\/code> supposed to be? In short:<\/p>\n<ul>\n<li><code>xAxisRotation<\/code> is the rotation of the underlying ellipse\u2019s axes in degrees.<\/li>\n<li><code>largeArcFlag<\/code> is a boolean value that determines if the arc is greater than 180\u00b0.<\/li>\n<li><code>sweepFlag<\/code> is also a boolean and determines the arc direction, so does it go clockwise or counter-clockwise?<\/li>\n<\/ul>\n<p>To better understand these concepts, I created this visual.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"GgJwvZR\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [SVG Path Arc Command Visuals [forked]](https:\/\/codepen.io\/smashingmag\/pen\/GgJwvZR) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/GgJwvZR\">SVG Path Arc Command Visuals [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<h3 id=\"radius-size\">Radius Size<\/h3>\n<p>You\u2019ll notice in that CodePen that there are ellipses drawn for each command. In the top row, they are overlapping, while in the bottom row, they are stacked up. Both rows actually use the same <code>radius.x<\/code>  and <code>radius.y<\/code> values in their arc definitions, while the distance between the start and end points increases for the second row.<\/p>\n<p>The reason why the stacking happens is that the radius size is only taken into consideration if the start and end points fit within the specified ellipse. That behavior surprised me, and thus, I dug into the specs and found the following information on how the arc works:<\/p>\n<blockquote><p>\u201cArbitrary numerical values are permitted for all elliptical arc parameters (other than the boolean flags), but user agents must make the following adjustments for invalid values when rendering curves or calculating their geometry:<\/p>\n<p>If the endpoint (<strong>x<\/strong>, <strong>y<\/strong>) of the segment is identical to the current point (e.g., the endpoint of the previous segment), then this is equivalent to omitting the elliptical arc segment entirely.<\/p>\n<p>If either <strong>rx<\/strong> or <strong>ry<\/strong> is 0, then this arc is treated as a straight line segment (a \u201clineto\u201d) joining the endpoints.<\/p>\n<p>If either <strong>rx<\/strong> or <strong>ry<\/strong> have negative signs, these are dropped; the absolute value is used instead.<\/p>\n<p>If <strong>rx<\/strong>, <strong>ry<\/strong> and <strong>x-axis-rotation<\/strong> are such that there is no solution (basically, the ellipse is not big enough to reach from the current point to the new endpoint) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).<\/p>\n<p>See the appendix section <a href=\"https:\/\/svgwg.org\/svg2-draft\/implnote.html#ArcCorrectionOutOfRangeRadii\">Correction of out-of-range radii<\/a> for the mathematical formula for this scaling operation.\u201d<\/p>\n<p>&mdash; <a href=\"https:\/\/svgwg.org\/svg2-draft\/paths.html#ArcOutOfRangeParameters\">9.5.1 Out-of-range elliptical arc parameters<\/a><\/p><\/blockquote>\n<p>So, really, that stacking is just nice and graceful error-handling and not how it was intended. Because the top row is how arcs should be used.<\/p>\n<blockquote><p>When plugging in logical values, the underlying ellipses and the two points give us four drawing options for how we could connect the two points along an elliptical path. That\u2019s what the boolean values are for.<\/p><\/blockquote>\n<h3 id=\"xaxisrotation\"><code>xAxisRotation<\/code><\/h3>\n<p>Before we get to the booleans, the crosshatch pattern shows the <code>xAxisrotation<\/code>. The ellipse is rotated around its center, with the degree value being in relation to the x-direction of the SVG.<\/p>\n<p>So, if you work with a circular ellipse, the rotation won\u2019t have any effect on the arc (except if you use it in a pattern like I did there).<\/p>\n<h3 id=\"sweep-flag\">Sweep Flag<\/h3>\n<p>Notice the little arrow marker to show the arc drawing direction. If the value is 0, the arc is drawn clockwise. If the value is 1, the arc is drawn counterclockwise.<\/p>\n<h3 id=\"large-arc-flag\">Large Arc Flag<\/h3>\n<p>The large Arc Flag tells the path if you want the smaller or the larger arc from the ellipse. If we have a scaled case, we get exactly 180\u00b0 of our ellipse.<\/p>\n<blockquote><p>Arcs usually require a lot more annoying circular number-wrangling than I am happy doing (As soon as radians come to play, I tend to spiral into rabbit holes where I have to relearn too much math I happily forget.)<\/p>\n<p>They are more reliant on values being related to each other for the outcome to be as expected and there\u2019s just so much information going in.<\/p>\n<p>But &mdash; and that\u2019s a bit but &mdash; arcs are wonderfully powerful!<\/p><\/blockquote>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Alright, that was a lot! However, I do hope that you are starting to see how <code>path<\/code> commands can be helpful. I find them extremely useful to illustrate data.<\/p>\n<p>Once you know how easy it is to set up stuff like grids, boxes, and curves, it doesn\u2019t take many more steps to create visualizations that are a bit more unique than what the standard data visualization libraries offer.<\/p>\n<blockquote><p>With everything you\u2019ve learned in this series of articles, you\u2019re basically fully equipped to render all different types of charts &mdash; or other types of visualizations.<\/p><\/blockquote>\n<p>Like, how about visualizing the underlying cubic-bezier of something like <code>transition-timing-function: ease;<\/code> in CSS? That\u2019s the thing I made to figure out how I could turn those transition-timing-functions into something an <code>&lt;animate&gt;<\/code> tag understands.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"gbpQxgp\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [CSS Cubic Beziers as SVG Animations &amp; CSS Transition Comparisons [forked]](https:\/\/codepen.io\/smashingmag\/pen\/gbpQxgp) by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/gbpQxgp\">CSS Cubic Beziers as SVG Animations &amp; CSS Transition Comparisons [forked]<\/a> by <a href=\"https:\/\/codepen.io\/halfapx\">Myriam<\/a>.<\/figcaption><\/figure>\n<p>SVG is fun and quirky, and the <code>path<\/code> element may be the holder of the most overwhelming string of symbols you\u2019ve ever laid eyes on during code inspection. However, if you take the time to understand the underlying logic, it all transforms into one beautifully simple and extremely powerful syntax.<\/p>\n<p>I hope with this pair of <code>path<\/code> decoding articles, I managed to expose the underlying mechanics of how path plots work. If you want even more resources that don\u2019t require you to dive through specs, try the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Paths\">MDN tutorial about paths<\/a>. It\u2019s short and compact, and was the main resource for me to learn all of this.<\/p>\n<p>However, since I wrote my deep dive on the topic, I stumbled into the beautiful <a href=\"https:\/\/svg-tutorial.com\">svg-tutorial.com<\/a>, which does a wonderful job visualizing SVG coding as a whole but mostly features my favorite arc visual of them all in the <a href=\"https:\/\/svg-tutorial.com\/editor\/arc\">Arc Editor<\/a>. And if you have a path that you\u2019d like properly decoded without having to store all of the information in these two articles, there\u2019s <a href=\"https:\/\/svg-path-visualizer.netlify.app\/\">SVG Path Visualizer<\/a>, which breaks down path information super nicely.<\/p>\n<p>And now: Go forth and have fun playing in the matrix.<\/p>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Decoding The SVG &lt;code&gt;path&lt;\/code&gt; Element: Curve And Arc Commands Decoding The SVG &lt;code&gt;path&lt;\/code&gt; Element: Curve And Arc Commands Myriam Frisano 2025-06-23T10:00:00+00:00 2025-06-26T20:32:27+00:00 In the first part of decoding the SVG path pair, we mostly dealt with converting things from semantic tags (line, polyline, polygon) into the path command syntax, but the path element didn\u2019t really&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/963"}],"collection":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=963"}],"version-history":[{"count":1,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/963\/revisions"}],"predecessor-version":[{"id":964,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/963\/revisions\/964"}],"wp:attachment":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=963"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}