SVG path d attributes are powerful but hard to read. I built a browser-only tool that parses and explains each command visually.
Try it: https://devnestio.pages.dev/svg-path-editor/
Supported commands
M/m MoveTo, L/l LineTo, H/h Horizontal, V/v Vertical, C/c Cubic Bezier, S/s Smooth Cubic, Q/q Quadratic, T/t Smooth Quadratic, A/a Arc, Z/z Close
Features
- Tokenizer regex handles all command types including scientific notation numbers
- Live SVG preview with grid background
- Click any command to highlight its endpoint on canvas
- Toggle control points, fill, stroke, and colors
- Built-in samples: arrow, star, heart, bezier, arc
- Bounding box calculation and subpath counter
- Auto-parse with 400ms debounce on input
All processing is browser-only — no server, no dependencies.
DevNestio — 100 browser-only developer tools.
Top comments (0)