Toon Titles: Bringing classic cartoon titles to life using CSS, SVG, and SMIL animations

Designing for Mike Worth’s new website reminded me how much I love classic cartoons. So, after handing over his design, I carried on exploring CSS, SVG, and SMIL animations. I now have a growing collection of Toon Titles.

Even with keyframes and scroll-based animations, CSS animation has remained relatively rudimentary. It reminds me of the Hanna-Barbera classics I grew up watching, especially Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, Yogi Bear.

See the Pen Scooter Looter SVG animation by Andy Clarke (@malarkey) on CodePen.

The animated shorts Hanna-Barbera made in the late 1950s and ’60s lacked the budgets given to live-action or animated movies. They were also far lower than when the pair made Tom and Jerry cartoons for MGM Cartoons. This meant the animators needed to work around their cost restrictions and the technical limitations of the time.

See the Pen Big Brave Bear SVG animation by Andy Clarke (@malarkey) on CodePen.

Hanna-Barbera’s animators’ simple and efficient techniques can now be implemented using CSS, SVG, and SMIL to bring static experiences to life. To learn what they’re capable of, I’ve been animating Toon Titles.

Check out Toon Titles

Or see the source code on Github.

I’m not an animator by trade, and I’m relatively new to CSS and SMIL animations, so if you fancy forking these Toon Titles and making new versions, I’d love to see them.