Skip to content
Camilo Giraldo

03How does a halftone effect work?

Context

Personal project

Year

2026

Practice

Creative coding · Image processing · Canvas & SVG · Web workers · Open source

TL;DR

A React library that recreates halftone printing effects digitally, born from analog screen printing knowledge.

Origin

I’ve always been interested in printing methods — screen printing, risograph, the original printing press by Gutenberg — and how ink is translated to paper or any other medium. I did a course in uni about screen printing, where we learned how different levels of shadow and brightness are achieved through dots of varying size, how the human eye perceives this as depth, and how, to get a colour image, we mixed four colours in a pattern and order that can produce any colour.

Build

Last year I started wondering if I could replicate this effect digitally. I learned how you can mathematically transform a colour image to greyscale, how web workers work, how to take all the pixels in an image and play with them to achieve the halftone effect, and how to work with canvas and SVG. This project was an excuse to try something out, learn deeply about it, and make an open-source library that is at least useful and interesting to me.

Details

Statscomputing…

Controls

Image

Grid

1
100%
Step basis

Shape

Channels

15°
75°
0°
45°

Export

Preview

Background
Pick a custom background