https://github.com/stickerdaniel/svg-reverse

Reverse and animate svg paths with a single click.
https://github.com/stickerdaniel/svg-reverse

dash-offset svg svg-animation svg-animator svg-path

Last synced: 3 months ago
JSON representation

Reverse and animate svg paths with a single click.

• Host: GitHub
• URL: https://github.com/stickerdaniel/svg-reverse
• Owner: stickerdaniel
• License: mit
• Created: 2024-09-23T15:30:07.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2026-03-08T02:18:24.000Z (3 months ago)
• Last Synced: 2026-03-08T07:35:28.023Z (3 months ago)
• Topics: dash-offset, svg, svg-animation, svg-animator, svg-path
• Language: JavaScript
• Homepage: https://svg-reverse.daniel.sticker.name/
• Size: 217 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SVG Path Reverser

A web tool for reversing specific paths in SVG files. Perfect for creating svg animations with the [stroke-dashoffset](https://css-tricks.com/almanac/properties/s/stroke-dashoffset/) technique, where you need control over the drawing direction.

**[Try this tool!](https://svg-reverse.daniel.sticker.name/)**

![SVG Reverse Demo](demo/svg-reverse-short.gif)

### Features

- Paste SVG code and select which paths to reverse

- Preserves all original attributes, classes, and comments

- Set individual easing, duration, and delay for each path.

- View and copy the modified SVG

- No manual coordinate editing required