Say hello to my Magnificent 7

When I started writing for CSS-Tricks, Geoff and I talked about what to put in my bio. He called me a “veteran” web designer. Geez, I felt old enough. So we settled on “pioneer.” That word stuck—and it’s what inspired the new set of animated pioneers now roaming my website.

I’ve had animated SVG characters on my website for years, and I like to change them up once in a while. Last time, I went back to a Madness-inspired set of nutty boy characters, which were based on artwork I’d commissioned from Josh Cleland. This time, I planned to play on the pioneer theme with seven magnificent Old West characters, drawn in the style of Hanna-Barbera cartoons.

I struggle with poses and, for the life of me, can’t draw hands. But after a lot of cussing, I managed to sketch outlines of my characters in Procreate on my iPad Pro. I’m more confident drawing paths in Sketch, so I relaxed once I had my vector outlines organised and could concentrate on colouring.

I wanted the colours of my pioneers to be consistent, and for the browns, greys, and reds in each character to match, so I sampled colours from a few of my Toon Title recreations.

Breaking the characters into separate SVG files let me rearrange and resize them for each animated graphic.

The more time I’ve spent studying cartoon backgrounds, the more I appreciate the work of artists like Lawrence (Art) Goble. I took inspiration from Hanna-Barbera cartoons, which use a limited palette of colours, simple, solid shapes, and just the right amount of detail to avoid dominating a scene.

I made five backgrounds, including a desert scene, a hardware store, a jailhouse and saloon interior, and a station.

First, I made a rough sketch in Procreate, often sketching over parts of reference images I’d found online.

Using Sketch, I blocked out the simplest shapes I could and added objects, using the same symbols repeatedly. Finally, I added linework for definition, being careful not to add too much detail to the backgrounds.

For the monochromatic colour palette, I chose only four shades and tints to prevent the background from competing with characters in the foreground.

Adaptive SVGs

When I’m implementing animated graphics like these, I use a method I’ve called Adaptive SVGs. I wrote about it recently in Smashing Magazine where I said:

By combining <symbol>, <use>, CSS Media Queries, and specific transforms, I can build adaptive SVGs that reposition their elements without duplicating content, loading extra assets, or relying on JavaScript. I need to define each graphic only once in a hidden symbol library. Then I can reuse those graphics, as needed, inside several visible SVGs. With CSS doing the layout switching, the result is fast and flexible.

I won’t cover Adaptive SVGs again here. You should read the full rundown in the original article.

Ambient animations

And of course, having animated so many cartoon titles recently, I couldn’t resist adding a few ambient animations to my characters, plus a few background details. Eyes blink, heads move, moustaches twitch, and toes tap. I wrote about Ambient animations recently in Smashing Magazine, where I said:

Ambient animation is like seasoning on a great dish. It’s the pinch of salt you barely notice, but you’d miss when it’s gone.

Accessibility

Commenting on that article, Nat Tarnoff made a good point about ensuring that ambient animations can be turned off using a visible button and the prefers-reduced-motion media query. He wrote:

These animations are specifically what cause problems for users sensitive to motion or distraction, as they do not come across as “ambient.” WCAG has 4 success criteria about animation. This style of animation violates 2.2.2 Pause, Stop, Hide while conforming to the others. This means there needs to be a visible button for users to stop or pause the animation. Prefers-reduced-motion is not considered sufficient to meet this requirement.

That was a helpful comment, so I added a button to each animation to toggle it on or off using a little bit of JavaScript.

Pioneering web design

I’ve always loved cartoon animation, especially Hanna-Barbera. The more I’ve experimented with their techniques in CSS, JavaScript, and SVG, the more fun I’ve had. I hope visitors enjoy that same sense of play—and if you’ve got a project you think I’d enjoy (cowboys optional), get in touch.