voronoi
An animated Voronoi cell pattern with smooth, anti-aliased borders. Up to five base colours plus dedicated controls for cell gaps and inner glow.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { Voronoi } from '@devmischief/shaders-svelte';
<Voronoi
width={1280}
height={720}
colors={['#ff006e', '#ffbe0b', '#06d6a0']}
colorGap="#2e0000"
colorGlow="#ffffff"
stepsPerColor={3}
distortion={0.4}
gap={0.04}
glow={0}
scale={0.5}
rotation={0}
offsetX={0}
offsetY={0}
speed={0.5}
fit="none"
/>
Shader Props
9 | name | description | type | values |
|---|
| colors | Cell colors (up to 5). | string[] | hex / rgb |
| colorGap | Color used for the gap between cells. | string | hex / rgb |
| colorGlow | Color tint of the radial inner shadow inside cells. Effective when glow > 0. | string | hex / rgb |
| stepsPerColor | Extra interpolated colors generated between each pair of base colors. | number | 1 → 3 |
| distortion | Strength of noise-driven displacement of cell centers. | number | 0 → 0.5 |
| gap | Width of the border/gap between cells. Cannot be removed completely due to natural Voronoi border artifacts. | number | 0 → 0.1 |
| glow | Strength of the radial inner shadow inside cells. | number | 0 → 1 |
| speed | Animation speed of the cell drift. | number | 0 → 3 |
| fit | How the pattern is fit into the canvas. | string | none · cover · contain |
Common Props
6 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |