Yours truly over at the Smashing Magazine: “CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.”

Yours truly over at the Smashing Magazine: “In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.”

Yours truly over at the Smashing Magazine: “SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.”

Yours truly over at the Smashing Magazine: “SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? Web design pioneer Andy Clarke explains how he builds what he calls “adaptive SVGs” using symbol, use, and CSS Media Queries.”

Yours truly over at the Smashing Magazine: “What’s the best way to make your SVGs faster, simpler, and more manageable? Andy Clarke explains the process he relies on to prepare, optimise, and structure SVGs for animation and beyond.”

It’s fascinating just how many opportunities for animations there are in a static cartoon title card. Here’s another Toon Title, this time based on Prize Fight Fright, a Yogi Bear cartoon from February 1959.

Yours truly over at the Smashing Magazine: “Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.”

This time, I put GSAP and SMIL to one side and made a Toon Title using only CSS animations. It’s based on Bewitched Bear, a Yogi Bear cartoon from January 1960. I’ve written a detailed write-up on optimising SVGs for animations which will be published on Smashing Magazine over the next few weeks.

Yours truly over at the Smashing Magazine: “What if you could take your CSS animations beyond simple fades and slides—adding an extra dimension and a bit of old-school animation magic?”

Yours truly over at the Smashing Magazine: “Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS.”

The more I dive into using the GSAP library for my Toon Title animations, the more I enjoy it. Here’s another Toon Title, this time based on Space Bear, a Yogi Bear cartoon from February 1960. I learned some new things while making this Toon Title, including how to use GSAP’s timeline feature.

The more I dive into using the GSAP library for my Toon Title animations, the more I enjoy it. Here’s another Toon Title based on Nowhere Bear, a Yogi Bear cartoon from December 1959.

Here’s another Toon Title based on Bear Face Bear, a Yogi Bear cartoon from September 1959. I’ve been meaning to experiment with GSAP for a while, and this animation gave me the opportunity.

Here’s another Toon Title and one of my favourites from my growing collection of reanimated Yogi Bear titles. This one’s based on Stranger Ranger, a Yogi Bear cartoon from November 1959.

I had some spare time today between client work and meetings, so I added another Toon Title to my collection. This one’s based on The Buzzin’ Bear, a Yogi Bear cartoon from December 1958.

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.

I now have a growing collection of Toon Titles. But while making them, I discovered two gotchas, which I haven’t seen documented. One for Firefox, the other for Safari.