DEV Community

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

Posted on

4

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!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay