SVG — The <path> Command Builder

A <path> is one element with a tiny language inside its d attribute. Pick a command, drag the lime anchors and blue control points, and watch the d string write itself.

interactive path builder

Live d attribute

        

anchor (on the curve) control point (pulls the curve)

A cubic C has two control points (one per anchor); a quadratic Q shares a single control point. The curve is always tangent to the line from an anchor toward its control point.