Home/Color & Design
✒️

SVG Path Gen

Create custom SVG paths visually. This tool runs 100% locally in your browser.

Advertisement
Ad Slot: tool-top

Point Coordinates

P1
P2
P3
P4
M 50 50 L 150 50 L 150 150 L 50 150 Z
Advertisement
Ad Slot: tool-bottom

What is SVG Path Gen?

Draw custom SVG shapes visually or tweak path commands (M, L, C, Z). Create complex curves and shapes without writing raw SVG code manually. Perfect for custom icons and dividers.

When to Use This Tool

  • 1Custom icon design
  • 2Section dividers (waves)
  • 3Data visualization

Examples

Input
Draw a triangle
Result
d="M 10 10 L 90 10 L 50 90 Z"

Frequently Asked Questions

Can I use this in CSS?

Yes, you can use the path in an <svg> tag or often as a clip-path property.

Privacy & Security

Privacy is our priority. Unlike many other online tools, ToolsHub doesn't upload your data to any server. Whether you're processing sensitive text, calculating financial data, or generating passwords, everything stays in your browser.