Bézier Curve SVG Path Editor

Every logo curve, icon outline and hand-drawn line in an SVG file is a path, and nearly all curves in a path are cubic Béziers. They look mysterious as numbers, such as C40 80 120 60 200 60, and become easy once you can see and drag the points that produce them. This editor shows the anchors and handles, writes the d attribute as you move them and lets you load a simple path back in.

Anchors and handles

An anchor is a point the path passes through, drawn as a square. A handle is a round control point attached to an anchor by a thin line. A handle leaving an anchor bends the curve that follows, and a handle entering the next anchor bends the curve that arrives there. The longer a handle, the more the curve is pulled towards it; its direction sets the direction the curve leaves or arrives. Matching handle directions on both sides of an anchor give a smooth joint, while different directions give a corner.

A worked example

Press Sample to load three anchors: a start at (40, 220) with an outgoing handle at (40, 80), a top anchor at (200, 60) with handles at (120, 60) and (280, 60), and an end at (360, 220) with an incoming handle at (360, 80). The path is M40 220C40 80 120 60 200 60C280 60 360 80 360 220. The first C has control points (40, 80) and (120, 60) and ends at (200, 60); the second has (280, 60) and (360, 80) and ends at (360, 220). The result is an arch with a flat top and vertical sides at both feet. Tick Close the path and the output gains L40 220Z at the end.

Editing

Drag any point; moving an anchor carries its handles with it, so the shape keeps its form. Select an anchor with the numbered buttons, then use Add point to append another anchor, Remove to delete the selected one, and “Curve or straighten this point” to give it handles or take them away. Straight segments are written as L. Coordinates are rounded to whole units while you drag, and the preview has the same 400 by 300 coordinate system as the SVG output, so it scales with the viewBox.

Line or filled shape

Draw as Line gives a path with fill="none" and a 4 unit round stroke in indigo, suitable for decorative lines or icon strokes. Filled shape swaps these: the path is filled and has no stroke. The editor preview shows the fill at 35% opacity so you can still see the points through it. For a filled shape, close the path; an open path is filled as if a straight line joined the ends.

Loading existing paths

Paste a path into the load box. If it consists of absolute M, L, C and Z commands, the page offers to load it as editable anchors, and reports the number of points. For example M40 220C40 80 200 60 360 220 loads two anchors with handles. Anything else, such as relative lowercase commands or arcs, is refused with a hint to convert first, since the editor would otherwise change the shape. Optimising tools can convert a path to absolute commands.

Edge cases

Handles can sit outside the canvas box; the editor limits dragging to 0 to 400 horizontally and 0 to 300 vertically. A very short handle makes a tight bend and an overlong one a loop. Removing the middle anchor of a smooth curve changes its shape, because the neighbouring handles stay where they were. Single subpaths only: a path with several M commands cannot be loaded.

Limits

The editor does not generate arcs or quadratic curves, boolean shape operations or dashed strokes. It is a learning and drafting tool for single curves, not a replacement for a vector program. Everything runs in your browser.

Related tools

• Cubic Bezier Generator uses the same curve idea for animation timing.
• SVG Blob Shape Generator builds a smooth closed path automatically.
• SVG Optimizer rewrites the path in its shortest form.
• CSS clip-path Generator clips elements to polygons.