A cool thing I made on #CodePen: interactive demo illustrating how to use `feColorMatrix` to swap two channels of its input.
https://codepen.io/thebabydino/pen/QWopRMK
Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features like CSS variables, grid, container queries, CSS mathematical functions, `color-mix()`, `:has()` and more.
Made with ❤️.
#SVG #svgFilter #filter #code #coding #frontend #webDev #web #webDevelopment
Some good uses for the swap.
If an image is not quite B&W, but slightly orangey red (meaning R>G>B), swapping R↔G gives a slightly yellowish green tint (as it means now G>R>B), swapping G↔B means it's slightly purplish pink (as now R>B>G) and swapping B↔R turns it into slightly aqua blue (as now B>G>R).
#SVG #filter #svgFilter #CSS #code #coding #frontend #webDev #webDevelopment
For red flowers, where the R channel component is by far the most important one, a B↔R swap makes them blue.
For pink flowers, the dominant channels are R and B. A G↔B swap makes the G channel contribution outweigh that of the B one, so we get golden flowers instead.
#SVG #filter #svgFilter #CSS #code #coding #frontend #web #wbDev #webDevelopment
A R↔G swap can turn oranges (R>G>B) into limes and can make it look as if animals with brown (also R>G>B, but darker) fur have gone to a hair salon and got a green punk hair-do.
#SVG #filter #svgFilter #CSS #code #coding #frontend #web #webDev #webDevelopment
Ana Tudor 🐯