In this chapter, you learned about visualizations and animations with SVG. This included working with pure JavaScript, SMIL, CSS, and two libraries for animation: GSAP and Vivus.
In this chapter, we looked at:
- Creating a custom data visualization with JavaScript, SVG, and CSS. You took a data set, manipulated it with JavaScript, and used the results to create a nice looking visualization that illustrates a set of data in an easy-to-read way.
- Creating a custom SVG animation with JavaScript. This included calculating increments to animate over 60 frames-per-second and using
requestAnimationFrame
as a method to ensure that you're providing the smoothest possible experience. - Animating SVG with CSS. You learned that the powerful options for animating SVG come with uncertain browser support.
- Animating SVG with SMIL, which also comes with uncertain browser support.
- Animating SVG with the Vivus library, which makes implementing a "drawing" animation in SVG as easy as including the library and...