✏️

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

How to Use

  1. Choose a Shape Preset or start with a blank canvas.
  2. Click on the canvas to add control points for your path.
  3. Drag handles to adjust curve control points (for Bezier curves).
  4. Toggle Closed Path to connect the end point back to the start.
  5. Click Copy SVG Path to copy the d attribute value.

How It Works

Each click generates an SVG path command: M (move to), L (line to), C (cubic Bezier curve), or Z (close path). The path data string is built incrementally and rendered as an SVG element in real time.

Example

Create a custom wave divider: add a starting point, two Bezier curves, and an ending point. Close the path and fill it with a color. Export the path d value and use it in your website's SVG divider element.

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.