Skip to content

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

Notifications You must be signed in to change notification settings

x2197/svg-path-visualizer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 93.7%
  • CSS 3.7%
  • HTML 2.6%