Playing with cel animations with SVG

After reading the Smashing Magazine article Creating Cel Animations With SVG by Heydon Pickering I decided to give it a try myself.

I sketched a simple face with 4 different states, vectorised the drawings in Illustrator and exported as SVGS. Then I brought it all together with the Sass mixin and tweaked the parameters until the result felt appropriate.

The technique could potentially be used for way more complex animations than this one, although performance impact should be tested.

    // Using Heydon's Sass mixin
    .shape {
      @include cel-animation((5 1 1 1), 0.08, true); 

    // Show nose and mouth
    .shape > :last-child {
      opacity: 1;

With the Sass mixin it is fairly simple to animate and it was definitely easy to work with – I'm looking forward to experimenting with more complex creations using this technique.

Want to know more or get in touch?