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

feColorMatrix: swap channels ☆ interactive demo, adaptive layout

Interactive demo to illustrate swapping two RGB channels via the SVG `feColorMatrix`. The idea is simple: if a pixel in the image is `rgb(35, 79, 185)...

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