dithering
A two-colour dither over seven procedurally generated patterns. Animated by default — pick a shape, pick an algorithm, dial in the pixel size.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { Dithering } from '@devmischief/shaders-svelte';
<Dithering
width={1280}
height={720}
colorBack="#191919"
colorFront="#56ae6c"
shape="warp"
type="4x4"
size={1}
speed={1}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
fit="none"
/>
Shader Props
7 | name | description | type | values |
|---|
| colorBack | Background color of the dither. | string | hex / rgba |
| colorFront | Foreground (ink) color of the dither. | string | hex / rgb |
| shape | Procedural pattern source. | string | simplex · warp · dots · wave · ripple · swirl · sphere |
| type | Dithering algorithm. | string | random · 2x2 · 4x4 · 8x8 |
| size | Pixel size of the dithering grid. | number | 0.5 → 20 |
| speed | Animation speed of the underlying pattern. | 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 | — |