Meta

Lately, I’ve been exploring the idea of composable visual systems made purely of “web matter” — markup (and typography by extension), CSS, SVG, and Javascript. Static image formats and video are wonderful things, but they aren’t runtime-malleable, human-read-and-writeable formats. They’re on the web, not of it.

Composable visual systems are interesting in part because constraints are creatively rewarding, and in part because they carry practical benefits. By combining and re-arranging an array of lightweight primitives, you can create an endless variety of expressions at very little cost (both in terms of production time and page weight). It’s not unheard of for a single image asset to clock in at 100kb. With a system like this, that same 100kb creates infinite assets, with all the inherent benefits web matter affords.

The challenge with a system like this is the strong influence exerted on style — the toolmarks, if you will. Every one of these materials defaults to clean, precise, and orderly. If that’s what you’re going for, rock and roll. But if you’re pursuing a direction that involves texture, randomness, or noise? You’ve got your work cut out for you, and the solutions aren’t always obvious.

This site is an exploration of those murky waters, and a nod to 90’s era graphic design. The underlying visual system is made up of four basic ingredients:

  1. A random div generator.
  2. A sturdy variable font (Name Sans, by Arrow Type) with a broad range of weights.
  3. A series of noise filters can be applied to any element.
  4. CSS 😎

It’s not without its quirks. Grunging up large elements is render-intensive, and it’s a chore to tame the glitchiness Safari exhibits. But maybe that’s just me holding on too tighly. Letting go of control, letting go of perfection; it’s kind of the point.

Credits: