Image tools: add duotone filters

[johngodley]

(copying from another repo)

Add support for duotone filters, based on a suggestion by @pablohoneyhoney

https://duotone.shapefactory.co/

Codepen from @jasmussen showing this in action:

https://codepen.io/joen/pen/dyyaELM?editors=1100

[johngodley]

Just to clarify, that isn't actually duotone, but I believe we need duotone to make this work. I will make a new codepen.

[johngodley]

(from @jasmussen)
Alright I created a new codepen, https://codepen.io/joen/pen/OJPbJrX?editors=1100.

This is duotone in that the image is using only two colors and shades between them.

It uses SVG filters still, which is good because that means we can apply it to any single image on the page, without having to wrap the image in a container or use CSS blend modes. It also has good support.

The tricky bit is, it uses a color matrix to make this happen, which to my eyes looks somewhat complicated:

I would recommend this read on A List Apart for details.

In the codepen, I put together a couple of examples. Here's a SVG color matrix that makes the image red and blue duotone:

Additionally, as we discussed, it requires us to output the actual SVG filter inline somewhere in the page that uses the filter on an image. Presumably this also means if you have multiple images with different filters, you'll need multiple SVGs with different matrices.

I defer to you, @johngodley, for whether this is within reach, do let me know. I think it's an incredible feature, and a powerful way to bring some dynamic colors to a website.

[johngodley]

I added a second image that shows a div with the image as a CSS background, with the same filter applied. The good news is, SVG filters work there too. The bad news is, if we want to apply it to CSS backgrounds without any child elements (such as text) not also inheriting it, we have to use backdrop-filter, which is not that widely supported.

https://codepen.io/joen/pen/OJPbJrX?editors=1100

[johngodley]

Oh, and backdrop-filter works really badly in Safari too :(

But still cool for Images!

[johngodley]

Closing this as it has since moved into core.