TooldenTOOLDENDEVELOPERON-DEVICE
SVG Path Editor
Paste any SVG path, tweak the path data and watch it render live, then export the result as an SVG or PNG file.
HOW TO USE
- 1Type or paste SVG path data into the editor, or open the sample picker (the grid icon next to the textarea) to load one of 51 built-in shapes across 7 categories: Shapes, Arrows, Icons, Weather, Animals, Food, Tech.
- 2Watch the preview update live as you edit. Invalid characters are filtered out automatically, so the SVG stays well-formed as you type.
- 3Use the M, L, H, V, C, S, Q, T, A and Z commands. Uppercase uses absolute coordinates, lowercase is relative to the current point. The viewBox is fixed at 500 by 500.
- 4Toggle Fill on to colour the shape (with a colour picker and opacity slider), set a background colour, or add a soft drop shadow. Pick one of 9 animations (rotate, pulse, blink, draw, float, bounce, swing, wobble, or none) to preview motion directly in the editor.
- 5Download the result as an SVG file, or as a PNG rasterized at 500 by 500 with a white background. Multi-path samples (icons with cutouts) export with the same even-odd fill rule as the preview.
EXAMPLE
INPUT
M250 50 L310 160 L430 170 L345 260 L370 380 L250 310 L130 380 L155 260 L70 170 L190 160 Z
OUTPUT
A 5-point star rendered live with the default outline. Toggle Fill on, pick a colour, and try the "draw" animation to see the stroke animate in. Download as SVG or PNG at any time.
FAQ
What are the path commands?
M moves the pen, L draws a line, H and V draw horizontal and vertical lines, C and S draw cubic Bezier curves, Q and T draw quadratic curves, A draws an arc, and Z closes the shape. Uppercase uses absolute coordinates, lowercase uses coordinates relative to the current point.
How many built-in samples are there?
51 samples across 7 categories: Shapes (star, heart, hexagon, infinity, wave, plus more), Arrows, Icons (power button, gear, checkmark, snowflake, and others), Weather, Animals, Food, and Tech. Open the sample picker and type to filter by name.
Why do some icons have multiple paths?
Icons with cutouts (like a power button or a gear) need more than one sub-path so the inner shape reads as a hole. The editor handles this with an optional paths array; each entry becomes its own <path> element with fill-rule="evenodd" so the cutouts render correctly.
What do the 9 animations do?
Rotate spins the shape around its centre. Pulse and blink fade the opacity in and out. Float moves it up and down. Bounce, swing, and wobble add small positional or rotational wobbles. Draw animates the stroke-dashoffset so the path appears to be drawn in. None leaves the shape static.
How is the PNG export made?
The path is rendered to a canvas at 500 by 500 pixels with a white background and downloaded as toolden-path.png. The SVG export keeps the vector path, so it scales without quality loss and can be edited in any vector tool.
My path renders nothing, what went wrong?
Common causes: coordinates outside the 0 to 500 viewBox, missing spaces between values, or a command the browser cannot parse. The editor filters invalid characters, so check the coordinate range and command spelling first.
Is my data sent anywhere?
No. Everything runs in your browser, your path data never leaves your device.