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.

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