Last week in the studio (CW15-26)

As well as showing off work in progress on Sho!io, I thought it might be interesting to document what I’ve been working on here. So I’m starting a new regular “Last week in the studio” series.

Week 15, 2026: Mountain Duck

Some weeks are “bitty,” and I need to jump from one thing to another. Those are the weeks I find the hardest. Fortunately, last week wasn’t one of those, as I was able to concentrate fully on a set of animated graphics for a new website design for the Mountain Duck app.

This design and the illustrations that go into it are intended to portray Mountain Duck as a product that lets people work with files in cloud storage and servers, as if they were on a local disc. Everything works transparently in the background, and files always stay in sync, so people never need to worry about where their files are.

So I created a series of duck machines, with this one intended for the home page. Here’s that CSS/JS animated SVG on CodePen:

See the Pen An animated SVG illustration for Mountain Duck by Andy Clarke (@malarkey) on CodePen.

My intention was to make the illustration feel meaningful, mechanical, and playful using bubbles, moving background elements, and streams of files travelling through different parts of the scene. The result should look effortless, which usually means there’s a lot going on behind the scenes. I built this with inline SVG, CSS, and vanilla JavaScript.

SVG was the right tool

I wanted to target individual parts of the artwork directly, style them with CSS, and use JavaScript only where timing or spawning logic genuinely needed it. Instead of treating the SVG as one asset, I structured it as a collection of moving parts: bubbles, buttons, cogs, dials, and file icons.

SVG structure matters, so I exported the static elements first and optimised them as much as possible by reducing the number of path points and merging them. Then, I brought in the animated elements one by one, adding CSS animations and the occasional bit of JavaScript as I went. CSS handles motion while JavaScript dictates when things happen and what values each instance should use. I made an initial pass for each animated element, then refined them over several iterations. This is the part I enjoy most. Not just making something move, but making it move in a way that feels intentional and natural.

More work from the week

This home page illustration wasn’t the only animation I made for Mountain Duck last week. There are several others which may find their way onto the new website I’m designing.

All in all, last week was productive, and I feel good about what I achieved.