31:T6be,html` `32:Tb1b,colorForm = html``33:[] 2f:{"title":"Filter Effects using SVG Color Matrices","cells":[{"id":0,"value":"md`# Filter Effects using SVG Color Matrices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`

While CSS filters give us a solid toolbox of effects like brightness() and saturate(), you can access a much wider variety of color effects using SVG's color matrix capabilities. For example, the feColorMatrix element lets you take the value of any color channel - including the alpha channel - and add or subtract it to/from any other channel. And you can a fixed offset to each channel. Using this, you can create custom greyscales, duotones, and even selective color saturation.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"html`Current Matrix is: <feColorMatrix type=\"matrix\" values=\"${R2R} ${G2R} ${B2R} ${A2R} ${O2R} ${R2G} ${G2G} ${B2G} ${A2G} ${O2G} ${R2B} ${G2B} ${B2B} ${A2B} ${O2B} ${R2A} ${G2A} ${B2A} ${A2A} ${O2A}\"/> )`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"R2R = Generators.input(colorForm.r2r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"G2R = Generators.input(colorForm.g2r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"B2R = Generators.input(colorForm.b2r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"A2R = Generators.input(colorForm.a2r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"O2R = Generators.input(colorForm.o2r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"R2G = Generators.input(colorForm.r2g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"G2G = Generators.input(colorForm.g2g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"B2G = Generators.input(colorForm.b2g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"A2G = Generators.input(colorForm.a2g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"O2G = Generators.input(colorForm.o2g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"R2B = Generators.input(colorForm.r2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"G2B = Generators.input(colorForm.g2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"B2B = Generators.input(colorForm.b2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"O2B = Generators.input(colorForm.o2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"A2B = Generators.input(colorForm.a2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"R2A = Generators.input(colorForm.r2a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"G2A = Generators.input(colorForm.g2a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"B2A = Generators.input(colorForm.b2a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"A2A = Generators.input(colorForm.a2a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"O2A = Generators.input(colorForm.o2a)\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}