Displaying data is made richer with chart visualizations. And those charts are made richer with animations. With a little HTML and CSS, you can quickly display data in custom SVGs. Add some JavaScript, and you can animate data as it appears on screen! In this video, we’ll:
- Create a pie/circle/line chart as an SVG
- Animate the SVG chart
- Add keyframe animations in JavaScript
- Add intersection observers to load animations only once in frame
???? Key Links ????
- Live Code: https://codinginpublic.dev/projects/animated-pie-charts/
- CodePen: https://codepen.io/Coding-in-Public/pen/NWyPpbx
- GitHub: https://github.com/coding-in-public/animated-pie-chart-javascript
---------------------------------------
???? Additional Links ????
- SVG Docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
- Animation JS Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
---------------------------------------
???? Related Videos ????
- Intersection Observer playlist: https://www.youtube.com/watch?v=noBm_S4IKr0&list=PLoqZcxvpWzze3Hkult9jLfCvZlzCYLb8G
- Animate SVG Circles: https://youtu.be/-Na_WRk3k74
- Animate SVG World Clocks: https://youtu.be/tYKlLQmg6OM
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:02 Basic SVG Animation
12:16 Landing Page Example
---------------------------------------
???? Connect With Me ????
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: https://twitter.com/cpenned
- Patreon: https://www.patreon.com/coding_in_public