Stuff & Nonsense product and website design

Blog and all that malarkey

Toon Titles: Stranger Ranger

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.

Stranger Ranger uses SMIL keyTimes to rotate, scale, and translate leaves falling from the trees.

See the Pen Stranger Ranger SVG animation by Andy Clarke (@malarkey) on CodePen.

Check out Toon Titles


Or see the source code on Github.


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


Written by Andy Clarke who tagged this with animation, SMIL, svg


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


Hire me. I’m available now to work on product and website design projects.