A viewBox Implementation For Paint API Worklets

Paint API worklets are an excellent platform for creative expression on the web. They are fast, portable, and responsive, but they can also be fiddly — especially when working with generative designs.

Why? Their inherent responsiveness can be more of a curse than a blessing! Paint API worklets re-render every time their “target” element changes size, resulting in an ever-changing drawing space. Often, this is wonderful. But, it can introduce significant complexity when working both with and without randomness.

This got me thinking — wouldn’t it be rad if we could define a viewBox attribute for our Paint API worklets, just like an SVG? We could define a fixed drawing space, say 1024x1024 units, and have it automatically scale to either cover or fit within its target element! Something like this:

.worklet-target {
  --viewbox-width: 1024;
  --viewbox-height: 1024;
  --scale-mode: cover;

  /* ... */
}

It turns out this is possible, requires only a few lines of code, and is a rather handy option to have when developing all kinds of worklets. I won’t dive into too much technical detail here, but here’s a CodePen demonstrating the idea:

Gradients courtesy of Open Props!

You can find the worklet code in the JS tab and the CSS implementation in the CSS tab. Try toggling the --scale-mode custom property between contain and cover and see how the pattern reacts!

Anyway, I hope this will come in handy for some folks.

Until next time!