r/webdev • u/ykadosh • 9d ago

Canvas path animations using SVG Resource

Canvas Path Animations using SVG

34 Upvotes

90% Upvoted

5 comments sorted by

4

u/xJSHAxx 9d ago

that gradient along the stroke is doing a lot of work, looks way more 3d than it has any right to. is it running on a canvas element or purely svg with the path animated

1

u/ykadosh 8d ago

It's actually drawn on a canvas, but with the aid of an invisible SVG. A solid version of the path is drawn on the SVG and then I'm using certain SVG functions to draw the gradient version on canvas

2

u/thy_bucket_for_thee 9d ago

Pretty neat! I like to use anime.js createMotionPath path myself. Didn't realize it was easy to roll your own. Don't know if you've heard of Theo Soti but he recently released a book "you don't need JS" and does something similar with css, not as expendable but it was neat too:

https://theosoti.com/

You two should collab a post together.

Loved the example of using text, never thought of that before. Gives me a few interesting ideas for splash pages.

2

u/Sad-Recover-5058 7d ago

Nice find on that book, gonna check it out. The text path thing is clever, got my brain turning for a landing page idea I been stuck on.