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 the following CSS rules:
This is a line drawn with absolute coordinates which are denoted with uppercase instructions.
The endpoint is at the absolute coordinates 500,500.
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.
This is just 2 lines.
But add a Z, and it becomes a polygon.
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 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.
You can experiment with cubic bezier curves with our SVG Cubic Bezier Path Generator.