Transcript
[00:00] To create a cubic curve, we’re going to need to set a starting point, so I’m going to set that at 10 on the X and 100 on the Y. Then we’re going to start creating our cubic curve using the uppercase C command, which implies that this is going to be absolutely positioned within the SVG. So the first two arguments, I should probably say the first four, the curve command takes two sets of X and Y coordinates as the control points for our curve. So right now I’m just going to set both of those to 10. So we’ve got 10 on the X, 10 on the Y, 10 on the X, 10 on the Y. And then the next argument is a set of coordinates that represents where we want the curve to end. So I’m just going to say 100 by 100, and now we have our curve.
[00:50] Now I’m going to create two circles here, and I’m going to set them up to match our control points. So it’s Y is 10 and X is 10, and then we’ll just give that a quick radius of 3. And very much like the quadratic curve, what is happening here is we have our starting point here on the left, we have our ending point here on the right. So the curve is always going to run from this point to this point. And then we have our control points, which are both set to the same coordinates, and therefore it’s just singularly pulling this curve up and to the left. Now what we’re going to do is jump over here to our second control point, and I’m going to change the X on that to 100. And I’ll also change it here, just so that we can see that. Now we have this nice symmetrical curve. Here’s our starting point. Here’s our end point. We have one control point pulling the curve up and to the left, and another control point pulling the curve up and to the right.
[01:50] Much like the quadratic curve has the T command as a helper function, the cubic curve has the S command as a helper function. Now this command gets a first control point automatically from the previous command’s end control point. So that control point that we’re inheriting from with the S command is 100 by 10. However, what we get is a reflection of that control point. So what I’m going to do is set this guy up. So it was 100 on the X, and then it was 10 on the Y. And if we look at that relative to this Y, it’s minus 90, right? So to go from 100 to 10 takes away 90. So what we’re going to do to approximate this is add 90. So this is roughly where that reflected and inherited control point is. So this was our second control point on the first curve. This now becomes our first control point on the second curve. So what the S command needs is an end control point or the second control point. And we’re going to try to bring this curve back around. So we’re basically going to mirror this guy. So we’ll say 10 on the X and 190 on the Y. And then we’re just going to set our end point, which is the next argument or set of coordinates to 10 by 100, which should match our starting point. So we’ll save that. And we can see we now have a nice little oval shape here.
[03:26] So our first curve started about here, was pulled up by this control point, and then pulled up and to the right by this control point, and then ended right about here. Our second command, our S command, started at the previous endpoint, ran to the endpoint that we gave it, 10 by 100. It was pulled in this direction or down and to the right by this control point, the inherited and reflected control point, and then pulled over by our second control point, which we set at 10 by 190, but I didn’t bother visualizing, and then ended right here at 10 by 100. Of course, we’re using the absolute version of the curve and the S command, so if I change our starting point, everything’s going to start to get a little weird. So let’s take a look at the relative version of these commands.
[04:20] So we’re going to turn our capital C into a lowercase C, and all of the arguments to the C command will now be relative to our starting position. So to get to 10 from 10, we go 0. To get to 10 from 100, we go negative 90. To get to 100, we add 90. To get to 10, we subtract 90. To get to 100, we go 90. And to get to 100 again, on the Y coordinate, we go 0. On the S command, now everything is going to be relative to this ending position. And if we look here, when we had the exact same starting position, that ending position was 100 by 100. So to get to 10, negative 90. To get to 190 from 100, we’re going to add 90. To get to 10, again, we’re going to go negative 90. And to get to 100, that’ll be 0. So now we’ve created the exact same set of curves, except now, if we want, we can move this guy over, say, to 250. A little too far. Say 200. And that works. And this guy still works. So now we can move this curve around and the, or we can change the starting point, but the curve remains intact.
Cubic Bézier curves power most of the web’s vector graphics. In this lesson, we break down the C and S commands and explain how two control points shape a curve.
You’ll learn why cubic curves are more flexible than quadratic curves, how control handles influence direction and tension, how smooth continuation (S) works, and how to read complex path data without guessing.
<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>