Canard sans souci

If you actively follow the CSS circuit you will have enjoyed CSS wrapped: 2023, a gorgeous website devoted to the exciting features expanding the language in the current year. There’s a treasure trove of topics if you ever need one, and a nice way to spend an afternoon living on the edge of web standards. But this article is not about cascading stylesheets. After all, it is a pseudo-3D Monday. Luckily, there is more than CSS on the page. There is a collection of eye-catching illustrations, and in this collection, the inspiring drawing of a duck. Actually, more than a single duck. You can count at least three before the section devoted to Responsive Design, boasting a bold look. So bold and popping that it led me to wonder: what would it take to recreate the water bird with Zdog? Well, it took me a while, and a few custom shapes, but I might have an answer with a cute little toggle. An input element of type checkbox which helps to animate the shapes to and fro — you might not believe the graphic goes beyond two dimensions with only a still frame.

I wasn’t able to repeat the fancy, highly saturated outline framing the fowl, but the result continues to grab your attention. And if you ever need a stroke around the shapes, you can always fall back to 2D and SVG. No need for an external library to steal focus.