Curves

On This Page

• Introduction
• Quadratic Curves
• Cubic Curves
• Tips & Tricks
• Curves Code Reference Table

Introduction

Curves are a bit of a beast with SVG drawing, and practice will always make perfect with these, but there is definitely a reason as to why designers and developers warn us to only attempt these with an illustration program.

The more complex these get, the harder they are to manage within the code unless you are meticulous with your units and pay close attention as to how the control points work with the different curve types.

This is really where a lot of the SVG difficulty will spike, but don't get discouraged! Start off simple, and as you practice and plan out your curves and paths, you'll grow more and more accustomed to how curves are expressed spatially and with the coordinate numbers we've been using up through this point.

Think about where you want the curve to start, where you want it to end, and fill in where the points that control the shape of the curve should appear with trial and error.

Once you get the hang of this, it will open you up to tons of possibilities in having full control over paths and organic shapes, plus just consider the following:

• Drawing more natural elements, plants, characters, and landscapes.
• More fluidity and dynamic design shapes for architecture, interfaces, component design, and logos.
• Curved and exponential mathematical graphs and data renderings.
• Swirls, spirals, cycloids like Spirographs.
• Much more detailed overall creative expression.

Quadratic Curves

Quadratic curves are great for simpler, one-arc curves anywhere within your path. You define a Quadratic curve with the Q letter code, and instead of one x and y value pair, it actually takes two.

The first value pair defines the control point for the curve, and the second pair defines where the curve ends.

The control point for a curve sets the direction and strength of the curve, and mathematically it creates a curve based on the slopes of the straight lines drawn to it from the beginning of the curve and the slope of the line drawn from the control point to the end of the curve.

The further away the point is from the curve starting and ending points, the more dramatic the curve. If you were to draw a straight line between the starting and ending points of the curve, the closer you place the control point to that line, the more subtle the curve will be. The following code will make a perfect arc appear in the middle of a straight line:

<path d="M 0, 100
	L 100, 100
	Q 150, 0 200, 100
	L 300, 100" stroke="purple" stroke-width="4"/>

Our MoveTo point is set to start at the extreme left edge of the canvas but down 100 units on Y. We draw a horizontal line out to 100 units over on X, then we have the Quadratic arc.

After the Q code, the first value places the control point at 150 on x, halfway between the 100 starting point and the 200 ending point of the curve, plus it puts the Y value at 0, so the point is all the way at the top of the canvas.

The ending point of the curve is at 200, 100. Since the control point is directly between the start and end of the curve, and the Y value of the control point is equal to the overall distance between the start and end points, we end up with a perfect convex arc with the arc apex pointing up towards the control point.

The final path command draws another horizontal line 100 more units out to the right of the end of the arc.

Smooth Quadratic Curves

The T letter code is used in conjunction with a quadratic code in order to create a smooth continuation of the curve to another point.

Instead of defining another control point and end point, the T command takes the control point position from the previous Q command and mirrors it to create an equal curve transition from the end of the Quadratic curve to the end point written for the T code.

The T code only takes one x, y value pair to define the end of that particular curved line segment, and they can be strung together to create smoother curves along a path.

The following will create a smooth undulating sine wave horizontally across the screen:

<path d="M 0, 100
	Q 50, 0 100, 100
	T 200, 100
	T 300, 100
	T 400, 100
	T 500, 100" stroke="purple" stroke-width="4"/>

Our pen starts off on the extreme left of the canvas and down 100 units on Y. The first quadratic curve is defined, with the control point placed at the very top of the canvas but halfway between the start and end point on X.

Each T code that follows mirrors the control point of the previous command before it, so each one only requires an endpoint. Each T code end point is placed 100 more units out on X for each iteration, giving us a repeating up and down curve that runs from left to right.

If the T values weren't in line with the previous ones, we'd end up with more interesting organic shapes, and understanding how these work together can really help when making subtle and complex curves.

Cubic Curves

Cubic curves are written using the C letter code, and they take x, y value pairs for two control points and a final end point.

So instead of one control point defining the slope between itself and the starting and ending points, the first control point defines the slope between it and the starting point, and the second control point defines the slope between itself and the ending point of the curve.

Much more complex curves can be defined by mastering the manipulation of these points, and once again subtlety or strength is determined by how far the points exist in relation to one another.

<path d="M 0, 100
	C 50, 0 100, 150 150, 100" stroke="darkBlue" stroke-width="4"/>

This example starts off on the extreme left of the canvas and 100 units down on Y. The first control point is placed 50 units out on X and all the way to the top of the canvas on Y, and the second control point is 50 more units over on X from the first control point but is placed 50 units lower on Y than the starting and ending points.

The ending point is 150 units out on X and is at the same Y value as the starting point. This creates one large arc that goes up from the starting point and comes back down towards the second control point, then dips below the horizontal plane between the starting and ending points before curving back up to the ending point.

Basically a sine wave where the second part of the wave is half the size of the first. Again, the closer the points are to the starting or ending points, the more subtle the curve, and the farther away the more dramatic.

Smooth Cubic Curves

Just like the Quadratic curves, Cubic curves have a smooth transition letter code, conveniently written as a capital S.

Using S after a Cubic curve will automatically mirror the second control point of the previous curve, so the S code only takes x, y value pairs for its own second control point and the ending point of the curve.

More complex organic curves can be defined using these transitions, but pay close attention to how the second control points of the previous curves affect how the curve bends before it starts to move towards your S control point.

To continue with our above example, we could completely mirror the sine wave curves like so:

<path d="M 0, 100
	C 50, 0 100, 150 150, 100
	S 250, 200 300, 100" stroke="darkBlue" stroke-width="4"/>

Adding the S code to our line essentially creates a mirrored version of our curve.

The C code makes one big swoop and then a little swoop that goes under the horizontal plane of the line, and then the S code continues the curve smoothly back up above the line for a small swoop followed by a large concave arc that goes way under the horizontal plane before arching back up to the ending point.

Pay attention to the values of the control points and the ending points and how they relate to each other.

Tips & Tricks

Well done on getting through this section! Keep practicing! Here are some overall tips concerning curves:

• For smooth curve continuations, try lining up the control points to be equal on the X or Y axis of your ending or starting points. This keeps the outgoing or incoming slope of the curve set up as an arc instead of having it appear more distorted.
• When your start and end points are fairly close together, subtlety is key. Pulling a control point very far away from your points will cause some unfortunate distortion that may not come across well in an embossed print.
• If your drawing has lots of thin lines and lots of curves, you may want to consider using Swell-form for the final printing as that will hold up better and give your lines much smoother tactile definition.
• Again, plan each move of the digital SVG path pen when making curves. Know where your starting and ending points are, and fill in the control points with trial and error. Bookending can really help, where you write out the starting and ending points first, then move back between them in the line of code and fill in the control points values from there. That way you'll know exactly what numbers to use rather than trying to guess and code it all straight ahead.

Curves Code Table