SVG Path Generator
Click on the canvas to draw SVG paths. Supports straight lines, quadratic and cubic bezier curves. Copy the SVG or path data.
💡 Click on the canvas to place points. Double-click to finish the path. Drag points to reposition them.
Mode
Points: 0
About SVG Path Generator
Draw SVG paths interactively by clicking on the canvas. Supports straight line segments (L), quadratic bezier curves (Q), and cubic bezier curves (C). The generated SVG is standard, clean code you can use directly in HTML or as an .svg file.
SVG Path Commands
M — Move to start · L — Line to point · Q — Quadratic bezier curve · C — Cubic bezier curve · Z — Close path back to start
Frequently Asked Questions
An SVG path is a versatile shape defined by a series of commands and coordinates in the
d attribute of a <path> element. It can describe any shape from simple lines to complex illustrations.A quadratic bezier uses one control point to define the curve, while a cubic bezier uses two control points for more precise shaping. Cubic curves (C) are more flexible and are what tools like Illustrator and Figma use internally.
Yes — paste the copied SVG code directly into your HTML. Inline SVGs can be styled with CSS, animated, and targeted with JavaScript. They also avoid extra HTTP requests compared to external SVG files.
Check the "Close path (Z)" checkbox before copying. This appends a Z command to the path data, which draws a straight line from the last point back to the first, closing the shape.