image dithering
A dithering image filter with four algorithms, custom palettes up to seven colors, and a sampled-from-image mode for retro-photo treatments.
Preview
live Click the preview to load a random sample image. Install
npm npm i @devmischief/shaders-svelte Code
import { ImageDithering } from '@devmischief/shaders-svelte';
<ImageDithering
width={1280}
height={720}
image="/assets/flowers.webp"
colorBack="#000c38"
colorFront="#94ffaf"
colorHighlight="#eaff94"
originalColors={false}
inverted={false}
type="8x8"
size={2}
colorSteps={2}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
fit="cover"
/>
Shader Props
10 | name | description | type | values |
|---|
| image | Source image processed by the dithering filter. | string | url |
| colorBack | Background color of the dither palette. | string | hex / rgba |
| colorFront | Foreground color of the dither palette. | string | hex / rgb |
| colorHighlight | Secondary foreground color (set equal to colorFront for classic 2-color dithering). | string | hex / rgb |
| originalColors | Sample the image's own colors instead of the configured palette. | boolean | true · false |
| inverted | Invert the image's luminance. Has no effect at zero contrast. | boolean | true · false |
| type | Dithering algorithm. | string | random · 2x2 · 4x4 · 8x8 |
| size | Pixel size of the dithering grid. | number | 0.5 → 20 |
| colorSteps | Number of colors in the palette. | number | 1 → 7 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
9 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| speed | Animation speed for time-based motion. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |