mathieudutour / svg-path-visualizer

Enter a SVG path data to visualize it and discover all its different commands

Home Page:https://svg-path-visualizer.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG Path Visualizer πŸ“

β†’ SVG Path Visualizer πŸ“

I've been working with SVGs for some time and always struggled to understand the path data syntax so I figured I'd build a visualizer for it.

Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands.

SVG Path Visualizer πŸ“

Contributing

I believe there is a lot of potential to explain more concept (Bezier curve, control points, etc.). I'd be happy to accept PRs!

Project setup

yarn

Compiles and hot-reloads for development

yarn start

Compiles and minifies for production

yarn build

Run your tests

yarn test

About

Enter a SVG path data to visualize it and discover all its different commands

https://svg-path-visualizer.netlify.app


Languages

Language:TypeScript 93.2%Language:CSS 4.2%Language:HTML 2.6%