SVG Animation and Visualizations

This chapter addresses the most dynamic and impressive use case for SVG: using SVG for data visualizations and animations. The tools you've already learned about, SVG, JavaScript, and CSS, and some new tools, will come together to create powerful options for you to build dynamic sites and applications. 

In this chapter, we'll learn the following:

• How to produce a static data visualization using SVG, JavaScript, and structured data
• An overview of the general techniques for animating SVG
• Animating SVG with Vivus
• Animation with GSAP

After working through the examples in this chapter, you'll be able to create animations and data visualizations with SVG and will know about two of the best tools for working with SVG and animation. 

Let's dive right in.