Curves

On This Page

• Introduction
• Quadratic Curves
• Cubic Curves
• Tips & Tricks
• Arcs
• 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 previous 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 point values from there. That way you'll know exactly what numbers to use rather than trying to guess and code it all straight ahead.

Arcs

Another way to generate curves within the <path> element is by using an Arc. Arcs are written with the capital letter A, and unlike Quadratic or Cubic curves, they do not use control points.

Instead of pushing or pulling the curve with control points, an Arc defines a portion of an invisible circle or ellipse that the path will travel along from its current position to a new end point.

This indirect approach is what often makes arcs feel confusing at first, but once you understand what each parameter is responsible for, they become very predictable and extremely useful.

The general syntax for an Arc looks like this:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

The Arc always starts at the current position of the path pen and ends at the final x, y coordinate listed at the end of the command.

The first two values, rx and ry, define the radius of the invisible ellipse that the arc is taken from. If these two values are equal, the arc will be circular. If they differ, the arc will be elliptical.

The x-axis-rotation value controls the rotation of the ellipse itself. For most basic use cases, this value can safely be set to 0.

The two flag values that follow are set to either 0 or 1 and are used to select which arc should be drawn:

• The large-arc-flag determines whether the path takes the shorter way (0) or the longer way (1) around the ellipse.
• The sweep-flag determines the direction the arc travels along the ellipse.

Because there are multiple possible arcs that can connect the same start and end points on an ellipse, these two flags are what tell SVG which one you want.

The following example creates a simple rounded arc between two straight line segments:

<path d="M 0, 60
	L 100, 60
	A 50 50 0 0 1 200 60
	L 300, 60"
	stroke="purple" stroke-width="4" fill="none"/>

In this example, the path starts on the left side of the canvas and draws a straight line to the middle. The Arc command then draws a curved segment with a radius of 50 units, ending 100 units further to the right at the same vertical position.

The large-arc-flag is set to 0 so the shorter arc is used, and the sweep-flag is set to 1 so the arc curves upward before returning to the horizontal line.

Changing the sweep-flag from 1 to 0 would cause the arc to curve downward instead, while changing the large-arc-flag to 1 would cause the path to travel the longer way around the circle.

Arcs are especially useful for rounded corners, circular shapes, and mechanical or architectural elements where a consistent radius is important.

Rounded Rectangle Example Using Arcs

While we can use the rx and ry attributes in a <rect> shape to make a rectangle with rounded corners, we can also use arcs within a <path>. By combining straight line segments with arcs of a consistent radius, we can build a rounded rectangle entirely within a single <path> element.

This approach is especially useful when you need precise control over the corners of an object and don't want them to be particularly uniform across the entire shape. While the following example is a uniform square with rounded corners, it can definitely be tweaked to build more complex and precise shapes.

The basic idea is simple: instead of drawing sharp corners, we stop short of each corner by the radius amount, then use an Arc command to smoothly connect one side to the next.

The following example creates a rounded rectangle with a corner radius of 20 units:

<path d="M 40,20
L 260,20
A 20 20 0 0 1 280,40
L 280,140
A 20 20 0 0 1 260,160
L 40,160
A 20 20 0 0 1 20,140
L 20,40
A 20 20 0 0 1 40,20
Z"
	stroke="black" stroke-width="4" fill="oldLace"/>

The path begins by moving the pen to the top edge of the rectangle, offset inward by the radius value. In this case, the radius is 20 units, so the path starts at x 40 instead of the far left edge.

Straight line segments are then drawn until the path approaches a corner. At each corner, an Arc command is used to transition smoothly to the next side rather than making a sharp turn.

Each arc uses equal x and y radius values, which produces circular corners. The large-arc-flag is set to 0 so the shorter arc is used, and the sweep-flag is set to 1 so the curve follows the expected direction around the shape.

This same pattern is repeated for all four corners before closing the path with the Z command.

Using arcs in this way produces evenly rounded corners and avoids the trial-and-error tuning that can occur when using Bézier curves for the same purpose.

Try this out using different shapes and line segments. Perhaps you need precise arc control when drafting an electronics schematic or wiring diagram, tuning a blueprint or a 3D extrusion model, or need more defined precision when building a logo. Arcs can be quite powerful once you get the hang of them!

Curves Code Table