SVG Path Visualizer - Custom Element

Interactive Web Component for visualizing and editing SVG path commands.

The component parses an SVG d attribute and renders its underlying geometry, including anchor points, control points, and construction guides.

All points can be inspected and manipulated interactively, making it useful for learning SVG paths, debugging vector graphics, and building visual editing tools.

Show demo

Features

Supports (for now) the following SVG path commands:

• M - Move To
• L - Line To
• H - Horizontal Line To
• V - Vertical Line To
• C - Cubic Bézier Curve To
• Q - Quadratic Bézier Curve To

• Interactive point dragging
• Control point visualization
• Construction guides
• Grid rendering
• Customizable styling through CSS variables
• Emits events while points are being modified

Use Cases

• Learn how SVG path commands work
• Debug complex SVG paths
• Create educational SVG demonstrations
• Build custom vector editing tools
• Inspect Bézier curve control points

License

MIT License © 2026 1812 / Franco Javier Gadea