SVG Animation

Build a SVG with stroke paths

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Optimize the SVG at your own discretion

It is possible to do a lot in 1024 bytes. So why does my SVG use

1. Remove Metadata
2. Strip unneeded
3. Reduce Precision
4. Reuse Paths
5. Minify

• https://jakearchibald.github.io/svgomg/
• https://github.com/svg/svgo

Play with CSS Animations

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
• https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Results

• https://codepen.io/jansauer/pen/RwawVdN
• https://codepen.io/jansauer/pen/ZEWzyRg