DEV Community

Cover image for Into The Halftone-Verse
Mads Stoumann
Mads Stoumann

Posted on

Into The Halftone-Verse

About a month ago, I finally watched “Spider-Man: Into The Spider-Verse” with my son (who had seen it multiple times). Wow! What a great new take on animation, and what a wild storyline.

A few days later, my son played around with a CSS filter-editor, I’d been working on (to use it, see it on Codepen in Full Screen):

Especially the “hue”-rotate function grabbed his attention:
“Wow, dad, if only you could have these big dots from Spider-Man as well!”

By “big dots” he meant halftones, and they’re used a lot in “Spider-Man: Into The Spider-Verse”, as well as any old comic-book you can get hold of.

When I was his age, I drew comics all the time.
For shades, I’d use sheets of halftones with different dot-sizes and densities. I don’t think you can buy these anymore!

Later on, I published a fanzine about comics — and for the covers, I used halftones for generating colour-effects. As an example: For light green, you’d use solid cyan with halftones of yellow, turned x amount of degrees:

Light green

As I recall, there were books with info about how you’d create most colours, using solids and halftones of different sizes and densities … and degrees.

For printing you used — and still use — Cyan, Magenta, Yellow and blacK, known as CMYK.
The order, in which the colours are printed, is often YMCK (almost like the song), that is, the lighter colours first.

So … to give my son the “big dots”, I wasted one rainy Sunday creating a "Halftone Editor", allowing you to create comic-like patterns like these:

Pattern 1!

Pattern 2!

Pattern 3

To try it/create your own patterns, follow this (full-screen!) Codepen link.

It’s how you used to create colours back in the days before digital … with a twist.

Thanks for reading!

Top comments (0)