(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.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
A page of sheet music can be as small as 8kb. I'm using a wasm decoder right now, but I could forsee using css filters after the fact to make it look less sharp and aliased
I have dabbled with some dithering algorithms and while this is way faster than my naive js implementations, this looks pretty bad
I think the noise is also way too 'soft'. At high frequencies it just becomes near-uniform gray so it barely affects the thresholding.
handy if you're running a site with pictures but you want everything to maintain a consistent aesthetic and colour scheme. might be better to just process the images and save them already dithered, but this way can be customized.

imagesource
noisebaseFrequency 0.90 numOctaves 1 seed 2
mix (feComposite arithmetic)k1 0.00 k2 0.75 k3 0.35 k4 -0.05
two-toneenabled
dark light