Dithering with CSS
30 points by speckx 4 days ago | 10 comments

rpastuszak 27 minutes ago
I’ve messed with a similar idea here: https://untested.sonnet.io/notes/just-some-innocent-gradient...

(The linked web app doesn’t work on mobile in portrait mode, sorry!)

The biggest issue with this trick is that different engines calculate the filters differently, thus turning an okay-ish image into something that looks like a glitch.

reply
nextlevelwizard 2 hours ago
Is this actually dithering?

I have dabbled with some dithering algorithms and while this is way faster than my naive js implementations, this looks pretty bad

reply
IshKebab 21 minutes ago
Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?
reply
heftig 5 minutes ago
The image gets de-saturated but the noise that's mixed in is colored. This looks like a mistake.

I think the noise is also way too 'soft'. At high frequencies it just becomes near-uniform gray so it barely affects the thresholding.

reply
ramon156 3 hours ago
Is this what they use at schools before they hand it over to the printer? /j
reply
skrebbel 19 minutes ago
I recommend lookscanned.io if you need a similar effect for legal reasons
reply
marvinblum 2 hours ago
Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...
reply
kelsolaar 2 hours ago
It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!
reply
binaryturtle 3 hours ago
I have to admit I don't think it's visually very appealing like that. It looks more like some sort of error/ glitch. Maybe my old Firefox does it weirdly?
reply
AntiUSAbah 2 hours ago
The image quality is so bad, I don't get it?
reply