I've lately been intrigued by the idea of using Webflow's random sorting functionality for collection lists in other ways.

I built a simple geometric pattern generator using a selection of shapes (circles, triangles, half-circles etc) and for a selection of colours, using built in Webflow functionality and a line or two of CSS. I wanted the challenge of using no JavaScript for this.

One collection list adds shapes to a grid, another adds blocks of colour. Using CSS mix-blend-modes we can fudge a clipping mask to pass this colour to the shape.

Randomness is provided by the sorting options for the collection lists. It's not truly random of course, since we're only loading shapes and colours from a set number of collection items.

Webflow only applies a random sort to the lists on a site re-export, or else every 12 hours when Webflow updates its cache.

To adjust the pattern, modify shapes and colours, you can adjust classes on the Styles page. View the cloneable Webflow project on the Showcase here.

Screenshot of the generator

Doing more with this

I would have liked to have applied a random rotation to each element. I originally created rotation classes and collection items, but other than applying colour with an element above another, there's no way I can think of having the styling of two collection list items interact (without resorting to JS).

I experimented with using nested collection lists to achive this interaction, since you could then use a CSS descendant combinator to adjust the child item based on the parent - but, you can't adjust the sort of the child items. Boo. In any case, you're limited to 5 nested child items.