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

> Free online Bézier curve tool: pen out anchors and handles to join degree 3, 4 or 5 segments into any shape, morph between shapes, export SVG or PNG.

- URL: https://qilingtools.com/en/math/bezier
- Category: Math Tools (https://qilingtools.com/en/math)
- Tags: [Math](https://qilingtools.com/en/tags/math), [Design](https://qilingtools.com/en/tags/design), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

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.

## How to use

1. Pick the Pen and click on the canvas to add anchors; press and drag to pull out handles for a smooth curve
2. Click the first anchor to close the path, or press Enter / Esc to finish an open one
3. Switch 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. Copy the SVG path d or the SVG code, or download an SVG / PNG from the panel on the right

## Features

- Pen tool: click for corners, drag for smooth points, click the start to close
- Degree 3, 4 and 5 Bézier curves: raising the degree is exact, lowering it shows the maximum deviation, and higher-degree segments are converted to cubics on export
- Random shapes: choose how many curves (2–24) make up the shape, and each roll only changes the control-point values while the old shape morphs smoothly into the new one; blob, flower, star burst and ripple styles, optional mirror symmetry, press R to keep rolling or turn on auto play; picking an example shape morphs into it too
- Smooth points keep their handles collinear; hold Alt while dragging to break them into a corner
- Double-click a segment to insert an anchor exactly there (de Casteljau split — the shape does not change)
- Several paths stacked, each with its own fill, stroke colour and width, including shapes with holes
- Import any SVG path d (M L H V C S Q T A Z, absolute or relative): quadratics become cubics exactly and elliptical arcs are converted to Bézier curves following the SVG spec
- Selecting a segment shows all its control points, the expanded B(t), the tangent and the arc length, with a t slider driving the de Casteljau construction
- Undo/redo, snap to grid, arrow-key nudging, scroll-to-zoom and automatic local saving
- Export the SVG path data, a complete SVG file or a 2× PNG

## 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.

## Related tools

- [Graphing Calculator](https://qilingtools.com/en/math/graph): Free online function graphing calculator: type sin(x), x^2 or 1/x and see the curve at once, with several functions, parametric and polar curves, PNG export.
- [Scientific Calculator](https://qilingtools.com/en/math/calculator): Free online scientific calculator: type 2*(3+4)^2, sin(pi/6) or log(8,2) and see the answer as you type, with degrees or radians and a history list.
- [Equation Solver](https://qilingtools.com/en/math/equation): Free online equation solver: enter coefficients for linear, quadratic (with discriminant, vertex and complex roots) and cubic equations, plus 2×2 systems.
- [Fraction Calculator](https://qilingtools.com/en/math/fraction): Free online fraction calculator: add, subtract, multiply and divide fractions with automatic reduction, plus fraction ↔ decimal with repeating digits.
- [Percentage Calculator](https://qilingtools.com/en/math/percentage): Free online percentage calculator: X% of Y, X as a percent of Y, increase and decrease, a value after a percentage change and the original behind it.
- [Prime Factorization](https://qilingtools.com/en/math/prime): Free online prime factorization: factor an integer with exponents, list every divisor and their sum, test primality with neighbouring primes, or list a range.
- [GCD and LCM](https://qilingtools.com/en/math/gcd-lcm): Free online GCD and LCM calculator: works with two or more integers, says whether they are coprime, shows each prime factorization and every Euclidean step.
- [Statistics Calculator](https://qilingtools.com/en/math/statistics): Free online statistics calculator: paste a data set for the mean, median, mode, range, quartiles, variance, standard deviation, standard error and outliers.