SVG
Paths
Draw arbitrary curves via the d attribute.
By EZ4Code Team
pathcurved
Code
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120">
<!-- M move, L line, H/V horiz/vert, C cubic, Q quad, A arc, Z close -->
<path d="M10 10 L100 10 L100 100 Z" fill="none" stroke="black"/>
<path d="M120 10 Q170 60 220 10" fill="none" stroke="red"/>
<path d="M10 60 C40 10 90 110 120 60" fill="none" stroke="blue"/>
<path d="M150 100 A40 40 0 1 1 230 100" fill="none" stroke="green"/>
</svg>Explanation
The path element draws any shape through a series of commands in its d attribute: M moves the pen, L draws a line, C and Q draw cubic and quadratic Beziers, A draws elliptical arcs, and Z closes the subpath. Uppercase commands use absolute coordinates while lowercase use relative. Paths are the most powerful SVG primitive.