Topics › Animation

Pixar in a box

I've been very bad at updating my blog in the last few years. One reason is that having baby greatly reduces one's few time, the other is that I tend to work on Khan Academy, where my work is already online for people to see. Over the last year and half I've been working on creating interactive programs for Khan Academy's partnership with Pixar: Pixar in a Box.

SVG starfield animation

This little project was the result of an email request, which I'm sharing here because I thought it was quite interesting. The question was, how could you make a starfield animation (like the old screensaver) with SVG.

3D Animation in SVG

A couple of months ago, I wrote a short post about experimenting with creating 3D graphics with SVG. Well, I've been experimenting a bit further, with shading and a bit of animation. I decided to make a mobile after seeing the Google logo celebrating Alexander Calder's 113th Birthday, which I think was some sort of Canvas animation.

SVG seedling animation

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

SVG animation: Rotating elements

A few days ago, I wrote about creating a rotating 3D SVG cube, which involves using EMCAScript to redraw every line. However, simple two-dimensional transformations can be animated in SVGs with much less hassle using <animateTransform>. For example:

The code for this animated square is