halftone cmyk

A four-colour process halftone — separates the image into cyan, magenta, yellow and black channels, each with its own ink colour and dot-size controls.

Preview

live

Click the preview to load a random sample image.

Install

npm

npm i @devmischief/shaders-svelte

Code

import { HalftoneCMYK } from '@devmischief/shaders-svelte';

<HalftoneCMYK
  width={1280}
  height={720}
  image="/assets/flowers.webp"
  colorBack="#fbfaf4"
  colorC="#00b3ff"
  colorM="#fc4f9d"
  colorY="#ffd900"
  colorK="#231f20"
  type="ink"
  size={0.2}
  gridNoise={0.2}
  softness={1}
  contrast={1}
  floodC={0.15}
  floodM={0}
  floodY={0}
  floodK={0}
  gainC={0.3}
  gainM={0}
  gainY={0.2}
  gainK={0}
  grainMixer={0}
  grainOverlay={0}
  grainSize={0.5}
  scale={1}
  rotation={0}
  offsetX={0}
  offsetY={0}
  fit="cover"
/>

Shader Props

name	description	type	values
image	Source image processed into CMYK halftone print.	string	url
colorBack	Paper color shown behind the inks.	string	hex / rgba
colorC	Cyan ink color.	string	hex / rgb
colorM	Magenta ink color.	string	hex / rgb
colorY	Yellow ink color.	string	hex / rgb
colorK	Black (key) ink color.	string	hex / rgb
type	Dot rendering style.	string	dots · ink · sharp
size	Halftone cell size relative to the image.	number	0 → 1
gridNoise	Smooth noise applied to dot positions and color sampling.	number	0 → 1
softness	Edge softness of the dots.	number	0 → 1
contrast	Contrast applied to the sampled image.	number	0 → 2
floodC	Uniform cyan dot size offset. Negative shrinks, positive grows the entire channel.	number	−1 → 1
floodM	Uniform magenta dot size offset.	number	−1 → 1
floodY	Uniform yellow dot size offset.	number	−1 → 1
floodK	Uniform black dot size offset.	number	−1 → 1
gainC	Proportional cyan dot size gain. Boosts only where dots already exist.	number	−1 → 1
gainM	Proportional magenta dot size gain.	number	−1 → 1
gainY	Proportional yellow dot size gain.	number	−1 → 1
gainK	Proportional black dot size gain.	number	−1 → 1
grainMixer	Grain distortion applied to dot edges.	number	0 → 1
grainOverlay	Post-process grain overlay on the final output.	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

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	—