Easy SVG animations

I often use SVGs from undraw, because they are MIT licensed, which means they are free to use without attribution. Since SVGs can easily be animated using CSS animations, we can use a tool called animista and choose an animation we like. We then have to inspect the SVG and choose the parts we want to animate. This process was also used to animate my 404 page.

Include animista css

.flicker-5 {
	-webkit-animation: flicker-5 8s linear infinite both;
	        animation: flicker-5 8s linear infinite both;
}
/* keyframes omitted to improve readability,
   just check the code on animista */

Add the animation class to the desired elements

<svg>
	<!-- (full svg omitted to improve readability) -->
	<path class="flicker-5"></path>
</svg>