Different Ways to animate svgs

We can animate svgs with three ways

• CSS Animation
• SMIL (dead)
• Via JS or JS animation libraries

https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/

https://medium.com/@aniboaz/animate-svg-4fa7dd00e860

SMIL

Browser support

Using Css Animation

Browser support

Line Animation

Simple explaination: https://css-tricks.com/svg-line-animation-works/
Another: https://medium.com/bitmatica-lab/svg-line-animation-for-the-uninitiated-5a65d91c6044

Line animation JS library: https://maxwellito.github.io/vivus/
This library has easy-to-use tool to generate animted svgs: https://maxwellito.github.io/vivus-instant/

Via anime.js