SVG seedling animation


19 Jul 2011

Here is an SVG seedling animation I made for Victoria. (Refresh page if it doesn't seem to work.)

The animation works using three lots of animateTransform() on each leaf, and ended up being a lot more complicated than I expected. A <def> defines a single leaf path which I drew in Inkscape. The leaf is draw such that it's stem is in the top left of the screen, which makes it easy to scale later because scaling is centred on the (0,0) point, so this keeps the stem in a constant position.

树苗长大了

The first animation is a rotation which occurs within the <def> tags because it is the same for every leaf. It rotates the leaf about the (0,0) point, so the stem stays in the same position. Then each leaf gets a separate scaling animation, so they are different sizes. Only then are the leaves moved into the right positions with translations and rotations. If this was done earlier then it would be difficult to centre the scaling and rotations. Finally a translation animation is added so the leaves move up the stem (which is being scaled).