Animated mesh gradient

← All motion patterns

Animated mesh gradient

Subscription

Stripe/Linear-style four-point mesh blend, perpetually drifting.

Four colour control points — amber, lime, blue and violet — orbit the frame on independent sine and cosine tracks. Each pixel is their inverse-distance-weighted average, which is what gives a mesh gradient its characteristic soft, boundary-free blending. Because the four periods are mutually irrational the arrangement never repeats. This is the look Stripe and Linear popularised, computed per-pixel on the GPU rather than faked with stacked CSS radials.

Animated mesh gradient

This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.

See plans
Animated mesh gradient · CreativePower