2026-09 · Aesthetic

Drawn gradients

How a soft gradient field gets made, and then what to do with it. Shapes drawn and blurred until they are one, or the same look written as a stop list — either way projected onto whatever geometry it is given. Shape and theme are separate axes, and everything else is a custom property.

Drawn, then blurred

Start here: this is where the colour comes from. Draw a few overlapping shapes in flat colour and blur them past recognition — the overlaps become the mid-tones a stop list has to be hand-tuned to produce. Each pair below is the same SVG: as drawn, then blurred. They are grouped by colour, three to a family — the theme is a separate axis from the drawing, so any of these shapes takes any of these colours.

Orange

Sunburst — radiating wedges

blur 0.16

Desert — dunes and a low sun

blur 0.18

One leaf, turned three times

transform="rotate(...)"

Blue

Quatrefoil, ribbon, star

--drawn / --raw

Pixels — a coarse mosaic

blur 0.1

Prism — crossed diagonals

blur 0.12

Mint

Ocean — stacked swells

blur 0.2

Crescent, teardrop, wedge

--drawn / --raw

Spots — a scattered field

blur 0.16

Night

Scanlines — analogue bands

blur 0.09

Ripples — concentric rings

blur 0.14

Nebula — drifting clouds

blur 0.24

Draw big, blur hard. The blur is a ratio of the surface, not a fixed length, so a drawing dissolves by the same amount at any size. How much depends on the density: a few large shapes take ~0.26, while a mosaic, a scatter or stacked bands average to one flat colour at that setting and want 0.1 or less. Every pair above names its own.
Bleed past the frame. Blur samples transparency beyond the artwork, so the drawing runs 22% outside the box and is clipped back. Fit it to the frame instead and every edge fades out — a vignette, not a fill.
Overlap on purpose. Colour mixes where shapes cross, so nothing is fully opaque. Three shapes at 85% give more distinct mid-tones than a hand-written stop list usually carries.
Reuse one path. The leaf pair in the orange band is a single curve rotated twice, and the prism in the blue band is one band angled two ways. Repeating one shape reads as a deliberate set, and the parts stay in proportion to each other for free.
Know which one to ship. A large blur is a real compositing cost and it repaints on resize. For a static surface, match the look with the stop recipe every shape below uses; keep the drawn version for hero-scale or animated surfaces, where the extra structure earns it.

Shapes

With a field in hand, it gets projected onto geometry. One drawing and one theme are held constant here so geometry is the only variable — only border-radius and aspect-ratio change, and the artwork is re-projected to cover whatever it is poured into.

Tile

--tile

Circle

--circle

Arch

--arch

Pill

--pill

Themes

A theme sets three colour stops and nothing else, so it composes with any shape and either recipe. `--night` is the exception: it moves the base the colour settles to, and layers over any of them.

Four themes

--dawn --dusk --mint --ice

Settling to ink

--night

Label

Placeholder line

Pools moved

--…-pool-x/y, --…-settle

In use

Content sits in the lower half, where the recipe has settled to the base and nothing needs a scrim to stay legible.

Card ground

--card

Label

Placeholder line

Section band

--band

A section header

Section band