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!
Top comments (5)
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!
Hi, thank you for the comment. I am happy to hear that you have found it interesting!
Also, thanks for the tip!
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!
Thanks again! You are incredibly helpful.
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.