SVG Animation

These pages are a set of demos of using SVG animation, both legacy declarative, JavaScript and newer CSS3 animation. Each demo consists of a brief overview of the nimations methods used, followed by the animation itself. Just click on the thumbnails to read the overview and see the demos.

Lesson 6

Lesson 6

A short physics lesson about one-dimensional ballistics using JavaScript animation

Lesson 6

Lesson 7

A short physics lesson about one-dimensional motion using JavaScript animation

Tempwave Demo

Temperature Wave Demo

A demonstration of heat flow in the ground using JavaScript animation

Hurricane Andrew demo

Hurricane Andrew

A (not so) simple SVG animation of the path of Hurricane Andrew which caused immense damage in southern Florida in 1999.

State Population demo

State Population Demo

A declarative SVG demo of the patterns of population growth in the United States over the last 200 years.

Bouncing Tigers and Tut

Bouncing Tiger and Tut

Animating some complex SVG vector illustrations using CSS3 animation.