Visual SVG path editor. Click to place points, drag Bezier curves, and see SVG path code update live.
Paste an SVG path string or start drawing from scratch.
Drag anchor points and handles to shape the path visually.
Click copy to grab the optimized SVG path data string.
Click on the canvas to place anchor points, drag to bend the curve between them, and the path's d attribute appears in a code panel that updates with every move. The canvas grid is the path's own coordinate system, so every number the editor emits is an absolute position in that grid; paste the output into a page whose viewBox does not match and the shape lands elsewhere or off-canvas. The other surprise: the editor paints the path so you can see it, but the d attribute alone carries no fill or stroke, so a freshly pasted path renders nothing until you style it.
A concrete input and expected output from the current implementation.
Input
Click to place the first anchor at (50, 100), drag its handle to (100, 50), click the second anchor at (250, 100), and drag its handle to (200, 50).
Expected output
M 50 100 C 100 50 200 50 250 100
Two anchors with two symmetric handles form one cubic Bezier segment: the C command stores control point 1, control point 2, then the end point. With handles 50 units out and 50 up, the curve's midpoint falls exactly on (150, 62.5), 37.5 units above the straight line between the anchors.
Each click places an anchor at a grid position. Dragging pulls out the two control handles of a cubic Bezier segment, and the code panel shows the matching C command with the handle coordinates. A joint is smooth only while the handles on both sides of the shared anchor stay on one straight line through it; move a handle off that line and the corner shows in both curve and code.
The code panel stays in step with the canvas: a drag rewrites the d string in the same motion. M opens the string at the first point, each segment adds one command, and a loop closed into a shape ends with the Z closepath command. The output is the attribute value only - commands and coordinates - not a complete SVG document, so it is pasted into an existing path element rather than used on its own.
Only if the tool offers an import or paste field - check its controls before assuming it does. When import works, expect clean round-trips for moveto (M), lineto (L), and cubic (C) commands; arc (A) and quadratic (Q/T) segments may not convert cleanly, because the editor shapes its curves as cubic Beziers.
The d attribute describes geometry, not appearance: an SVG path with neither fill nor stroke is invisible. Add stroke and fill to the path element, then confirm the surrounding viewBox matches the editor's grid - if it is much smaller than the coordinates, the shape sits outside the visible area.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.