SVG path animation in Solid like Svelte's transition draw
https://v2.svelte.dev/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50
https://github.com/sveltejs/svelte-transitions-draw
I came from Svelte, One thing I miss from svelte is transition:draw feature.
When chaning svg path's "d" attribute, it smoothly redraw. Can I do this kind of thing in Solid?
Svelte
The magical disappearing UI framework
GitHub
GitHub - sveltejs/svelte-transitions-draw: Draw transition plugin f...
Draw transition plugin for Svelte. Contribute to sveltejs/svelte-transitions-draw development by creating an account on GitHub.
2 Replies
Actually, that's an abstraction for this trick: https://css-tricks.com/svg-line-animation-works/
Chris Coyier
CSS-Tricks
How SVG Line Animation Works | CSS-Tricks
I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the
You can even set the pathLength to 1 so you can use a CSS animation: https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/
Chris Coyier
CSS-Tricks
A Trick That Makes Drawing SVG Lines Way Easier | CSS-Tricks
When drawing lines with SVG, you often have a element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset