📝 CSS-Tricks 279: Houdini Is Not as Scary as You Think

View this newsletter on the web.

[Robin]: Here’s the deal: I’m scared of Houdini. Not the illusionist famed for jumping off waterfalls and burying himself alive, but the newish set of APIs available in CSS. That’s why I so thoroughly enjoyed this piece by George Francis about creating generative patterns:

Recently […] CSS was gifted an exciting new set of APIs known as Houdini, and one of them — the Paint API — is specifically designed for rendering 2D graphics. For us web folk, this is incredibly exciting. For the first time, we have a section of CSS that exists for the sole purpose of programmatically creating images. The doors to a mystical new world are well and truly open!

[…] Paint API worklets are fast, responsive, and play ever so well with existing CSS-based design systems. In short, they are the coolest thing ever. The only thing they are lacking right now is widespread browser support.

That sounds neat as hell, and the effects are even neater:

All of this here—the dots, the little colorful shapes, and the green background—all of that is done with Houdini. It’s a big deal because it unlocks a treasure trove of possibilities where before you’d probably just make this with Photoshop or some image editing app and be done with it. But now that it’s in CSS we can do some weirdo generative art stuff with it.

Let’s walk through getting started with the CSS Paint API, step by step:

  1. You create a new JavaScript file to house your “worklet.”
  2. That worklet is code that runs on a separate browser thread and has to live in a standalone .js file.
  3. We can start writing our JavaScript like this…
class Worklet { paint(ctx, geometry, props) { const { width, height } = geometry; ctx.fillStyle = "#999"; ctx.fillRect(0, 0, width, height); } } if (typeof registerPaint !== "undefined") { registerPaint("workletName", Worklet); }
  1. All this is doing is making a gray background. Let’s load this worklet and make some HTML to apply it to…
<div class="element"> This div has the background set by the CSS Paint API </div> <script> if (CSS.paintWorklet) { CSS.paintWorklet.addModule('worklet.js'); } </script>

5. And finally, in our CSS, we apply that worklet to that .element div in our HTML:

.element { background-image: paint(workletName); }

All of that leads to this remarkable, ground-breaking design:

Okay, so it’s not much to look at but it takes all the scariness away from this stuff for me. You write some JavaScript to make some shapes and colors and whatnot, then write some HTML as well as some CSS to apply the output to. It’s simple enough, really. But from here on out we can start doing all the really exciting generative art stuff that George writes about in his article. We can make buck wild shapes that change and distort with each refresh:

I mean, okay, it’s no gray background like my excellent design, but sure. This is fine, I guess.

Joking aside, isn’t all this really quite impressive? It feels like one of those things that opens up so many possibilities, so many weird new doors in CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s