Transcript
[00:00] We’re going to set our starting point at 100 by 200 and we’re going to begin creating our first arc with the uppercase A arc command. Now the arc command takes a bunch of arguments and the first one is a x radius of an ellipse. So if you’re not familiar with the arc, the arc is a portion of the circumference of an ellipse. The y radius of our ellipse is going to be 50 as well. The next argument is the rotation of our ellipse. We’re going to set that to zero. The next argument is called the large arc flag. I tend to think of this as the size flag and we’ll talk more about that in a moment. The next one is called the sweep flag, but you can really think of this as the direction flag. And then the last two arguments are where we want our curve to end. So I’m going to set that to 200 by 200. And we can see here’s our curve at 100 by 200 ending at 200 by 200.
[01:14] So what I’m going to do to kind of illustrate what’s going on here is I’m going to create all the possible paths we could make with this configuration by simply changing these two flags. So this one’s zero, zero, this one will be zero, one, this will be one, zero, and this will be one and one. Save that. And now we can see we’ve got kind of the other half of our ellipse. Now our ellipse is set to basically be a circle because or to be a circle because we have an equal x and y radius. So let’s go ahead and take a look at the sweep flag.
[01:42] And again, you can think of that as the direction flag. Right now it’s set to zero. A lot of people say that means it’s traveling counterclockwise. To some degree, you could just think of this as the up or down method. So right now we’re at zero and we are traveling on the down side, the bottom side of the two potential arcs we could create right now. I’m going to set that to one and now we’re going to travel on the top side. That’s really all there is to it. Again, you will hear clockwise versus counterclockwise, positive angles versus negative angles. 99% of the time it’s the top or the bottom.
[02:20] So if we go up here and we change our radius, let’s change the y radius. We’ll say 85. We can see what I didn’t change it on this guy. So we can see that we’re still traveling along the top. And if we switch this to zero, but now we’re traveling along the bottom. Now, what I’m going to do is change this rotation and we’re going to see something kind of interesting happen. I’m going to set this. We’ll say we’re going to rotate it by 25 degrees. Let me just clean up this code a bit. And now if we take a look at our arc, we can see we’re still traveling along the bottom side of this larger ellipse. But now we have four paths we could travel along. We could travel along this guy, this guy, the one we’re traveling along now, and this one here. And so what happened is when we rotated the ellipse, proportions of the ellipse kind of got out of our control. And the ellipse that we’re defining is now wider on its X diameter than our two points. So what happened is the ellipse here got moved up so that our points could draw a portion of its circumference while maintaining their distance from the starting point to the end point. And by virtue of rotating it, we now have two new options we could travel along.
[03:45] So we’ve got those ellipses. But everything still applies. Here’s our direction flag or our top and bottom flag. So if I change that to one, it’s going to travel along the top. If I put it back to zero, it’s going to travel along the bottom. Now the large arc flag, and again, I prefer to call this the size flag, is going to control whether we’re drawing more than 180 degrees of the ellipse. So right now it’s at zero. So we’re drawing the smaller part of this arc. And if I switch that to one, we’re still going to travel on the bottom side. So remember, we’ve got our direction flag set to bottom. We’re going to set our large arc flag or our size flag to one. And so if we’re going to still travel down, now we’re going to travel along the larger portion of this arc. So save that. And we can see that happened right there. And if I change the direction to top, what’s going to happen is we’re going to travel along this part of the larger arc. And again, if I put these back, there’s zero, zero. Here’s the smaller arc, the size set to small and the direction set to up. If I change the size to large, there we go.
[05:05] So I’m going to copy this guy really quick and just point out that there is a relative version of the arc command, a lowercase a. And the only thing that we need to change here is where our ending positions are going to be relative to our starting positions. So this was 100 by 100. This is 200 by 200. So to get to 200 from 100, we’re going to add 100. And to get to 200 from 200, we’re going to add zero. So now this arc is right on top of our other arc. But if I want to move it around, I can move it and the arc remains intact. Move that a little further, maybe. However, if I try to move this guy around, things are going to kind of start to get weird.
Arcs are the most misunderstood SVG path command — and the most intimidating. In this lesson, we demystify the A command and show you exactly how to draw precise arcs in SVG.
<html> <head> <style> body { background-color: #222; } path { stroke: #fff; fill: none; stroke-width: 3px; } circle { fill: yellow; } </style> </head>
<body> <svg width="550" height="800"> <path d="M10 100, C10 10, 100 10, 100 100, S10 190, 10 100"></path> <path d="M250 100, c0 -90, 90 -90, 90 0, s-90 90, -90 0"></path>
<!-- control points --> <circle cx="10" cy="10" r="3"></circle> <circle cx="100" cy="10" r="3"></circle> <circle cx="100" cy="190" r="3"></circle> <circle cx="10" cy="190" r="3"></circle>
<!-- start/end --> <circle cx="10" cy="100" r="3"></circle> <circle cx="100" cy="100" r="3"></circle> </svg> </body></html>