This is an interactive demonstration of the SVG path element.

SVG code in the textarea is displayed in a SVG container to the right or below.

The SVGs in this demo use a 600x600 viewbox and the following CSS rules:

stroke-width: 2;
stroke: #000;
fill: none;
Horizontal Line
Vertical Line
Absolute Coordinates

This is a line drawn with absolute coordinates which are denoted with uppercase instructions. The endpoint is at the absolute coordinates 500,500.

Relative Coordinates

This is a line drawn with relative coordinates (lowercase "l"). Now the endpoint is extended 500 points vertically and horizontally from the startpoint at 100,100.

Multiple Lines

This is just 2 lines.

Closed Path

But add a Z, and it becomes a polygon.

Quadratic Bézier Curves

This is an example of a quadratic bézier curve.

The path is "pulled" in the direction of the control point at 300,400.

To illustrate further, we'll redraw the curve and add a straight path from 100,200 to 500,200 and a red circle at the control point. You can see that the curve intersects the point halfway between the straight path and the control point which is denoted with a blue circle.

The T command allows you to continue the curve to another endpoint using an implied control point that is a reflection of the first control point.

Let's draw a simple curve and we'll use the q with relative coordinates to make it simpler.

Now we add another endpoint with the t command and you can see that the curve is extended and reflected like a sine wave.

Cubic Bézier Curves

Cubic bézier curves are similar to quadratic bézier curves, but they take 2 control points.

Here's a simple example with the control points in red.

If you move the control points further apart, you can make a curve like a wineglass.