Mastodawn

If you're a Cheetah+ supporter on Ko-fi or Patreon, you can see not just a live demo (the one screenshotted below), but also a detailed write-up on this:

❇️ https://ko-fi.com/post/Better-duotone-with-SVG-filters-B0B61W5SDD

❇️ https://www.patreon.com/posts/better-duotone-153264752

#duotone #svgFilter #SVG #filter #coding #web #dev #webDev #webDevelopment #code #frontend #filterEffect #CSS

Show thread

Ana Tudor 🐯4d ago

But my new method of setting the `flood-color` in the #CSS still doesn't escape another drawback the previous ones had: it cannot use the same #SVG #filter for different #duotone pairs.

A lime & dark purple duotone means one SVG filter, a pink & blue duotone means another SVG filter.

Boo! ☹️👻

Is there no way to get any duotone effect with the same SVG filter, setting the tones as CSS vars on the img?

There is! With an SVG filter that doesn't involve any complicated matrix/ transfer function.

Ana Tudor 🐯4d ago

A couple of years ago, I made this @codepen demo:
https://codepen.io/thebabydino/pen/RwdjEBW

Since `flood-color` can be animated from the #CSS, this made it more flexible than methods where the two tones were baked into the #SVG #filter as decimal representations of their percentage RGB values.

If you're unfamiliar with those older methods, here are some links, in chronological oder:

👉 https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

👉 https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/

👉 https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/

👉 https://utilitybend.com/blog/revisiting-svg-filters-my-forgotten-powerhouse-for-duotones-noise-and-other-effects/

#duotone