How was this animated graphic created? Any ideas would be amazing!

Forum|Forum|2 years ago
September 4, 2023
3 replies
222 views

Hi!

I don't know which community this question would belong as this graphic was on a website that I visited and I really want to know how they created it to be animated and lightweight like this. I am hoping someone in this awesome lounge cafe can help me out!

Here is the link to it.

https://www.lastpass.com/-/media/f9d78e4c81c4478385f4d65664a60bac.svg?la=en&hash=46B1F3D4B83A0E364EDE1AD6075F3C92

This topic has been closed for replies.

rayek.elfin

Legend

That's an SVG animation. There are various animation tools that export/support SVG animations:

https://www.svgator.com/ (subscription based)
https://www.haikuanimator.com/ (now open source and free, Lottie based)
After Effects with Lottie and Bodymovin http://airbnb.io/lottie/#/
Watch a tutorial to understand how it is installed: https://www.youtube.com/watch?v=aVg0JUZyLJo

An alternative to SVG is to use the canvas element in HTML5 and render animations to it. This is generally much faster and can also be extremely light-weight. The advantage is that it is harder to "steal" the assets. It's similar to how Flash worked, but without the disadvantages and allows for advanced interactivity, including games.

Specifically Rive is what would be used for that. Duolingo uses it for all its small animations, and it is more lenient and efficient than SVG (or any other format!).

https://rive.app/

It is also of course an option to manually code animations like these with html, css, svg and javascript. A tool like http://snapsvg.io/ or https://greensock.com/gsap/ will simplify that process dramatically.