https://github.com/mathieudutour/svg-path-visualizer

Enter a SVG path data to visualize it and discover all its different commands
https://github.com/mathieudutour/svg-path-visualizer

svg svg-path visualization

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mathieudutour/svg-path-visualizer
• Owner: mathieudutour
• Created: 2020-04-27T19:46:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-31T02:35:02.000Z (about 1 month ago)
• Last Synced: 2024-11-29T17:06:31.923Z (13 days ago)
• Topics: svg, svg-path, visualization
• Language: TypeScript
• Homepage: https://svg-path-visualizer.netlify.app
• Size: 6.17 MB
• Stars: 651
• Watchers: 8
• Forks: 48
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• my-awesome-list - svg-path-visualizer

README

        
# SVG Path Visualizer 📐

→ **[SVG Path Visualizer 📐](https://svg-path-visualizer.netlify.app)**

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 📐](./docs/screenshot.png "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

```bash

yarn

```

### Compiles and hot-reloads for development

```bash

yarn start

```

### Compiles and minifies for production

```bash

yarn build

```

### Run your tests

```bash

yarn test

```