SVG Path to CSS & Canvas Converter

An SVG path's d attribute describes a shape with commands such as M (move to), L (line to), C (cubic Bezier) and Z (close). The same path data can be reused outside SVG: CSS clip-path: path() clips elements to the shape, and the Canvas Path2D API draws it on a canvas. This converter produces both from your path string.

How to use it

1. Paste the path data, the value of the d attribute.
2. Copy the CSS clip-path declaration or the Canvas Path2D code.
3. Adjust the size if needed, because path coordinates are absolute pixels.

Example

Path data for a simple wave banner: M0 0 H300 V80 Q150 120 0 80 Z

• CSS: clip-path: path('M0 0 H300 V80 Q150 120 0 80 Z');
• Canvas: const p = new Path2D('M0 0 H300 V80 Q150 120 0 80 Z'); ctx.fill(p);

Path commands reference

• M x y move, L x y line, H x and V y horizontal and vertical lines.
• C cubic Bezier, Q quadratic Bezier, A elliptical arc, Z close path.
• Uppercase commands use absolute coordinates; lowercase are relative to the current point.

Things to know

• clip-path: path() is not responsive. Coordinates are in pixels and do not scale with the element. For responsive shapes, use polygon() with percentages, or an SVG clipPath with clipPathUnits='objectBoundingBox'.
• Canvas paths can be transformed with ctx.scale() before drawing, which makes resizing easy.
• Paths from icon sets usually assume a viewBox such as 0 0 24 24; scale accordingly.