halftone dots
A halftone-dot image filter for comic, risograph, and newsprint treatments. Mix-and-match dot styles, hex or square grids, and custom palettes.
Preview
live Click the preview to load a random sample image. Install
npm npm i @devmischief/shaders-svelte Code
import { HalftoneDots } from '@devmischief/shaders-svelte';
<HalftoneDots
width={1280}
height={720}
image="/assets/flowers.webp"
colorBack="#f2f1e8"
colorFront="#2b2b2b"
originalColors={false}
inverted={false}
type="gooey"
grid="hex"
size={0.5}
radius={1.25}
contrast={0.4}
grainMixer={0.2}
grainOverlay={0.2}
grainSize={0.5}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
fit="cover"
/>
Shader Props
14 | name | description | type | values |
|---|
| image | Source image processed into halftone dots. | string | url |
| colorBack | Background color shown behind the dots. | string | hex / rgba |
| colorFront | Dot color (ignored when originalColors is enabled). | string | hex / rgb |
| originalColors | Sample dot colors from the image instead of using colorFront. | boolean | true · false |
| inverted | Invert the image's luminance. Has no effect at zero contrast. | boolean | true · false |
| type | Dot rendering style. | string | classic · gooey · holes · soft |
| grid | Underlying lattice the dots are placed on. | string | square · hex |
| size | Grid cell size relative to the image. | number | 0 → 1 |
| radius | Maximum dot size relative to its grid cell. Values above 1 let dots overflow into neighbors. | number | 0 → 2 |
| contrast | Contrast applied to the sampled image. | number | 0 → 1 |
| grainMixer | Grain distortion applied to dot edges. | number | 0 → 1 |
| grainOverlay | Post-process black/white grain overlay. | number | 0 → 1 |
| grainSize | Scale of the grain distortion and overlay. | number | 0 → 1 |
| 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 grain motion. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |