SVG gradients
A collection of experiments with grainy, noisy SVG gradients built on turbulence filters.
At a glance
- TypeScript, React, SVG
Tags
Experiments with SVG turbulence-based gradients. A LinearGradient component is a drop-in replacement for the standard SVG linearGradient element, documented in the source with examples.
A radial version works the same way. They give the grainy, noisy gradients that SVG's own cannot, by running a turbulence filter along the gradient, and the grain can be tuned and layered.
Examples
The demo shows what it can do:
- a banner with a gradient background,
- debug animations that show the turbulence field and its boundaries, for linear and radial gradients,
- shapes such as a flower, a four-pointed sparkle and a torus built from several layered gradients,
- text with a gradient fill,
- compositions with several layers of different turbulence and colour,
- an arch and an abstract piece that combine masks, gradients and shapes.
