SVG Shape Generator — Draw a Closed Bézier Shape, Get the SVG

M moves the pen to the start without drawing. C draws a cubic Bézier: two control points followed by the end point. Z closes the path back to where M put the pen, which is what makes the segments one shape rather than a line that happens to end near its start. Those three are the whole of what this page emits.

As many as you place points. Every point after the first adds a C segment, and closing adds one more to get back to the start — so a four-point closed shape is four Bézier curves in a single d attribute, and a twelve-point one is twelve.

Because a closed outline is a region, and most uses want the region: a background blob, a divider, an icon, a clip-path. Outline-only is there for the cases that want the line itself. Note that SVG will fill an open path too, by pretending it is closed — which is almost never what you meant, so close it deliberately.

A smooth point keeps its two handles on one line and the same length, so the curve passes through without a kink. A corner point has independent handles — or none at all, which makes the segments either side of it straight lines. Click adds a corner, drag adds a smooth point, double-click switches between them, and holding Alt while dragging a handle breaks a smooth point apart.

Yes — a heart, star, drop, leaf, cloud, speech bubble, blob or wave, each one a real editable path rather than a picture. Every point and handle is yours to drag afterwards, and each preset brings its own closing and fill, because an open wave and a filled heart are not the same kind of thing.

Yes. Undo and Redo cover every edit — moving a point, bending a handle, inserting, deleting, applying a preset — and Ctrl+Z and Ctrl+Shift+Z work while the canvas has focus. Delete removes the selected point.

Yes. Paste the contents of its d attribute into the import box. Every command in the grammar is read — M L H V C S Q T A Z, absolute or relative, with implicit repeats — quadratics become cubics exactly, the smooth shorthands get their reflected control point, and elliptical arcs are converted to cubics. A path with several subpaths keeps the first and says so, because this editor holds one path. The shape is scaled to fit the square, so the box it was authored in is not preserved; the shape is.

A degree-n segment has n+1 control points, so a higher degree lets one span bend further without adding another point to it — a quartic has one interior control point, a quintic two, drawn as diamonds. Raising the degree is exact: a cubic is also a quartic, so the shape does not move and you simply gain a handle. Lowering cannot be exact, because most quartics are not cubics, so the editor says how far the shape moved. SVG has only cubics, so a higher-degree segment is exported as several cubic pieces, split until they match the real curve to within a tenth of an output unit — closer than the numbers are printed to.

Yes to both. The path list holds as many paths as you add, each with its own closed flag, fill, stroke colour and stroke width, and each exported as its own <path>. Marking a path as a hole is what makes a ring: it joins the path above it as a second subpath and the pair is filled with fill-rule="evenodd", so the inner outline takes the fill away again rather than drawing a smaller shape on top. The ready-made ring is two paths doing exactly that.

Everything about the segment leaving the selected point: its four control points in the output's units, the polynomial B(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³P₃ that they are the coefficients of, the point and the tangent vector at the t on the slider, and the arc length. Ticking the box draws de Casteljau's construction on the canvas: interpolate along each chord between the control points, then along the chords between those, and the point on the last one is B(t). That construction is also what splits a segment when you insert a point, which is why inserting does not move the curve.

Only the numbers. The drawing is held as fractions of the square, so a larger viewBox is the same shape with more precision — useful when the shape will be scaled up, or when you want to avoid decimals in the output.

Yes, that is one of the output options: clip-path: path('…'), with the same d string. Both clip-path and offset-path read the data in CSS pixels rather than in your viewBox, so pick the size to match the element you are clipping — a 100-unit shape clips a 100px box.

So that a shape pasted into a page inherits the colour of the text around it instead of arriving as hard-coded black, which is invisible on a dark background. Change either to any value you like once it is in your own markup.