QiLing Tools

✒️Bézier Curve Editor - Online Pen Tool for SVG Paths and Shapes

Draw like the pen tool in a design app: click for a corner point, click and drag for a smooth curve, and click the first anchor to close the shape. Several paths can be stacked, each with its own fill and stroke, and shapes with holes such as rings work too. Segments can be degree 3, 4 or 5: the higher the degree, the more control points and the more a single segment can bend. Short of ideas? Set how many curves you want and hit Random shape — the current shape morphs into a new blob, flower or star burst. Select any segment to see all of its control points and the B(t) formula, and step through the de Casteljau construction on the canvas. When you are done, copy the SVG path or export an image.

Free · No sign-up · Runs in your browserLast updated:

Loading tool...

How to use Bézier Curve Editor

  1. 1Pick the Pen and click on the canvas to add anchors; press and drag to pull out handles for a smooth curve
  2. 2Click the first anchor to close the path, or press Enter / Esc to finish an open one
  3. 3Switch back to Select and drag anchors and handles to reshape; double-click a segment to insert an anchor, double-click an anchor to toggle corner/smooth
  4. 4Copy the SVG path d or the SVG code, or download an SVG / PNG from the panel on the right

FAQ

What is a Bézier curve?
A smooth curve whose shape is set by a few control points. A cubic Bézier has four: P₀ and P₃ are the end points and P₁, P₂ pull the curve, following B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃. Pen tools in design software, font outlines and SVG paths all use them.
How do degree 4 and 5 Bézier curves differ from cubic ones?
A degree-n Bézier curve has n+1 control points — 4 for a cubic, 5 for degree 4, 6 for degree 5 — and follows B(t) = Σ C(n,i)(1−t)ⁿ⁻ⁱtⁱPᵢ. A higher degree lets a single segment bend more. Raising a cubic to degree 4 or 5 is exact and leaves the shape unchanged; lowering the degree can only approximate, and the tool shows the largest deviation. SVG stops at cubics, so higher-degree segments are exported as several cubic pieces accurate to within 0.1 px.
How do several curves make one closed shape?
Click anchors one after another with the pen (drag where you want a curve) and finish by clicking the first anchor. Each pair of neighbouring anchors is joined by one cubic Bézier segment, so the whole path is a chain of segments end to end.
What is the difference between a corner and a smooth point?
A smooth point has its two handles on one straight line, so the curve passes through without a kink; a corner point has independent handles (or none) and makes an angle. Double-click an anchor to switch, or hold Alt while dragging a handle to break a smooth point.
What is the de Casteljau construction?
A way of finding a point on the curve by repeated interpolation: take the point at ratio t along each of the three lines joining the control points, then along the two lines joining those, and the point at ratio t on the last line is B(t). Tick the option and drag the t slider to watch it. The same construction splits a curve exactly when you insert an anchor.
Can I use the exported path on a web page?
Yes. “Copy d” gives exactly what goes inside <path d="…">, and “Copy SVG code” gives a complete SVG with fill and stroke that you can paste into HTML. The downloaded SVG opens in Figma or Illustrator.
Can I edit an existing SVG?
Yes. Paste the d attribute of a path into the import box. Absolute and relative M L H V C S Q T A Z commands are supported. Elliptical arcs (A, including rotation and the large-arc and sweep flags) are split into pieces of at most 90° and converted to cubic Béziers following the SVG spec, accurate to about 0.03% of the radius, so you can drag and edit them like any other curve.