Dithering with CSS

(ikesau.co)

35 points | by speckx 3 days ago

8 comments

  • tiborsaas 12 minutes ago

    This is CSS dithering with "SVG backend" doing the heavy lifting by utilizing the feComposite filter

    https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

    • tnelsond4 9 minutes ago

      If we could get jbig2 native support in browsers we could do monochrome black and white images at ridiculously small file sizes.

      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

      • rpastuszak 42 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.

        • 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

          • IshKebab 36 minutes ago

            Yes it is dithering. Unusual dithering though - I don't see why it is coloured. Is this intended for printers?

            • heftig 19 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.

          • ramon156 2 hours ago

            Is this what they use at schools before they hand it over to the printer? /j

            • skrebbel 34 minutes ago

              I recommend lookscanned.io if you need a similar effect for legal reasons

              • marvinblum 2 hours ago

                Exactly what I thought. Work sheets used to look like this if they have been copies of copies of copies...

              • kelsolaar 2 hours ago

                It feels and looks like threshold-quantized Perlin rather than actual proper dithering. Cool stuff that said!

                • binaryturtle 2 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?

                  • AntiUSAbah 1 hour ago

                    The image quality is so bad, I don't get it?