2
\$\begingroup\$

I have a variety of images that will be used in a style intended to mimic a dot-matrix LCD.

In a previous version, I rendered these images using a program and essentially ended up with a duplicate of the entire image library (quite large!) whereas for this "rebooted" version I want to take advantage of newer technologies (in browsers at least) such as SVG filters.

Here is a sample:

<svg viewBox="0 0 32 32" width="128" height="128">
    <filter id="alphapixels">
        <feColorMatrix type="luminanceToAlpha" />
        <feComponentTransfer>
            <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feComponentTransfer>
            <feFuncA type="discrete" tableValues="0 0.5 1" />
        </feComponentTransfer>
        <feComponentTransfer>
            <feFuncA type="linear" slope="0.67" />
        </feComponentTransfer>
        <feComposite operator="in" in2="SourceGraphic" />
    </filter>
    <image filter="url(#alphapixels)" image-rendering="pixelated" xlink:href="{SRC}" width="32" height="32" />
</svg>

My logic here is:

  1. Convert to grayscale alpha mask with the handy luminanceToAlpha function
  2. Invert the result (so dark regions become less transparent instead of more)
  3. Snap the grayscale to the discrete values "off, medium, on"
  4. Scale it down to "off, faint, dark"
  5. Composite with original image so as to restore original alpha mask (otherwise the previously transparent background counts as solid darkness)

This is my first time using SVG filters so I have no idea if I'm doing it right, but it just feels wrong somehow to have multiple <feComponentTransfer> elements each with a single <feFuncA>. Is there perhaps some way to improve this?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.