Silk Screen Halftone

Pure JavaScript CMYK Halftone Engine — Tri-Color Screen Print Simulation

Turn any photo into a silk screen / pop art / Warhol-style halftone print.
Real variable-size dots at proper screen angles. Zero dependencies. 100% client-side.

Live Demo  ·  Full Version on ToolKnit  ·  Quick Start

---

What Makes This Different

Most "halftone" tools online are just threshold filters — reduce to black/white dots or pixelate. This engine does the real thing: rotated screens per channel, variable dot radius proportional to intensity, and proper color separation.

Each pixel channel (red, blue, grey) is processed through a rotated halftone grid. Dots grow or shrink based on channel intensity — exactly how offset printing separates CMYK plates.

Red Channel 15° screen angle

Blue Channel 75° screen angle

Grey Channel 45° screen angle

The three channels are composited with multiply blending on your chosen paper color — just like ink on newsprint.

---

Features

Core Real halftone dots — variable-size circular dots, not a pixelation shader Per-channel screen angles — 30°+ separation eliminates moiré patterns Adjustable LPI — low = big dots (punk poster), high = fine detail (offset print) Dot size scaling — 0.3x to 2x multiplier for artistic control

Output Custom channel colors — full color picker for each channel Paper color — warm newsprint, pure white, black, any color Channel preview — toggle composite / red-only / blue-only / grey-only PNG export — one-click download at full resolution

---

Quick Start

git clone https://github.com/2645149786-dotcom/silk-screen-halftone.git
open silk-screen-halftone/index.html

That's it. No npm install. No build step. No framework. One HTML file.

---

How It Works

The entire engine is ~100 lines of JavaScript in 3 functions:

// 1. Walk rotated grid, sample channel intensity, draw dots
generateHalftoneChannel(srcData, channel, angle, lpi, dotScale)

// 2. Multiply-blend all channels on paper background
compositeSilkScreen(redChannel, blueChannel, greyChannel, width, height)

// 3. Preview single channel in isolation  
renderSingleChannel(halftoneData, color, width, height)

Algorithm:

1. Uploaded image is drawn to a hidden canvas
2. Each channel (red/blue/grey) iterates through a rotated dot grid
3. At each grid point, channel intensity is sampled → dot radius computed
4. All three channels are composited with multiply blending
5. Result is rendered to visible canvas and available for PNG export

---

Architecture

index.html
  鈹溾攢鈹€ Inline CSS (no external stylesheets)
  鈹溾攢鈹€ Inline JS (no external scripts)
  鈹?    鈹溾攢鈹€ generateHalftoneChannel()  鈫?Core halftone math
  鈹?    鈹溾攢鈹€ compositeSilkScreen()      鈫?Multiply blend engine
  鈹?    鈹斺攢鈹€ renderSingleChannel()      鈫?Channel isolation
  鈹斺攢鈹€ Canvas API (HTML5, zero dependencies)

Zero dependencies. Not even a CDN. Works offline after first load.

---

Related

• ToolKnit — 89 free browser-based tools built with this engine and others. Full bilingual (EN/CH) support, no signup, no uploads.
• ToolKnit GitHub — More open-source standalone demos and tool collection.

---

License

MIT — use it, fork it, ship it, sell it. See LICENSE.

_{Built with love by ToolKnit}