SVG Animations

Login examle

Scalable Vector Graphics

XML vector graphics format
Easily scalable
2D animations possible

<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64">
    <circle cx="32" cy="32" r="32" fill="#2ecc71"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64">
    <circle cx="32" cy="32" r="32" fill="#2ecc71"/>
</svg>

circle
rect
line
polygon
path

Animation

Web
- CSS + Keyframes
- gsap
iOS
- SVGKit
Cross platform
- Lottie
Android
- android-pathview
- AnimatedSvgView
...

Let's code

https://codesandbox.io/s/6v57rzj3kk

Try yourself at

Solution: https://codesandbox.io/s/71v34r390q

Made with Slides.com