I wrote a function that creates a drawing animation for any logo or simple SVG Image

A week + couple of days ago I wrote a JavaScript function that I am so proud of; it can quickly create a drawing style animation from any SVG logo/simple SVG image. It's proven to be a fun way to quickly create loading animations. I have shared it with a few people and someone suggested posting about here. - side note: This my first post on dev.to

To create the animations I played around with the strokeDasharray and strokeDashoffset CSS attributes.

If you want to see how I made it here is a short YT video:

Happy Coding!

Comments

[Schemetastic (Rodrigo)]

Hello, I'm a JS dev and I felt curious about how does it work, so I checked the code. And it was very interesting. I think is the first time I read about getTotalLength().

By the way, is possible to embed videos here too!

Welcome to the DEV community!

[Piko]

Hi, thank you for the comment. I am happy to hear that you have found it interesting!

Also, thanks for the tip!

[Schemetastic (Rodrigo)]

Hey! Your welcome.

Well, about the video, what I'm getting is a thumbnail with a link to the video and a description, but is possible to embed the player here if that's what you want to do, here is a guide on how to do embeds in DEV: Ways to enhance your DEV posts! Useful embeds.

Hope it helps!

[Piko]

Thanks again! You are incredibly helpful.

[Schemetastic (Rodrigo)]

No problem, I already, liked, subscribed and commented your video. Is so nice. You know I'm planning to produce videos any time soon, I just want to finish a small project I'm working on and maybe do one or two more things and then start producing videos.