auto-scale-worklet

Auto Scale Worklet

A CSS Paint API worklet that explores the automatic scaling of fixed dimension content - similar to that of SVG's viewBox, or background-size: contain / background-size: cover.

Why?

Paint API worklets, by nature, are responsive - they will always re-paint when the element they are applied to changes dimensions. Nine times out of ten, this is great, and exactly what we want! Sometimes, however, this introduces quite a bit of complexity, especially when working with random numbers, complex patterns, etc.

This worklet is a simple class that allows us to define a fixed --worklet-width and --worklet-height property, alongside a --worklet-scale-mode option. --worklet-scale-mode works just like background-size in CSS, and accepts either a contain or cover value.

When using this worklet, we can create our images in a similar way to SVG, working to a fixed "viewBox" or space. The content rendered in this space will then be automatically scaled to either cover, or fit within the element it is applied to.

I think this could be handy for beginners, or when implementing a custom PRNG solution is not viable.

Just an idea, anywho!