31:T5fa,html` `32:[] 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":621,"value":"viewof file = Inputs.file({\n label: \"Bring Your Own Image\",\n accept: \".png,.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"Inputs.button([\n [\n \"initial\",\n () => {\n reset(\"identity\");\n }\n ],\n [\n \"grey (red)\",\n () => {\n reset();\n set(viewof r2r, 1);\n set(viewof r2g, 1);\n set(viewof r2b, 1);\n }\n ],\n [\n \"grey (green)\",\n () => {\n reset();\n set(viewof g2r, 1);\n set(viewof g2g, 1);\n set(viewof g2b, 1);\n }\n ],\n [\n \"grey (blue)\",\n () => {\n reset();\n set(viewof b2r, 1);\n set(viewof b2g, 1);\n set(viewof b2b, 1);\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"Inputs.button([\n\n [\n \"zero out\",\n () => {\n reset();\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof matrix = {\n const values = `${r2r} ${g2r} ${b2r} ${a2r} ${o2r} ${r2g} ${g2g} ${b2g} ${a2g} ${o2g} ${r2b} ${g2b} ${b2b} ${a2b} ${o2b} ${r2a} ${g2a} ${b2a} ${a2a} ${o2a} `;\n\n const UI = html`Current Matrix is: <feColorMatrix type=\"matrix\" values=\"${values}\"/> )`;\n UI.value = values;\n return UI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"### red channel","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"viewof r2r = Inputs.range([-1, 2], { value: 1, step: 0.01, label: \"red to red\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof g2r = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"green to red\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"viewof b2r = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"blue to red\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"viewof a2r = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"alpha to red\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"viewof o2r = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"red offset\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"### green channel","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"viewof r2g = Inputs.range([-1, 2], {\n value: 0,\n step: 0.01,\n label: \"red to green\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"viewof g2g = Inputs.range([-1, 2], { value: 1, step: 0.01, label: \"green to green\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"viewof b2g = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"blue to green\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof a2g = Inputs.range([-1, 2], {\n value: 0,\n step: 0.01,\n label: \"alpha to green\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof o2g = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"green offset\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"### blue channel","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"viewof r2b = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"red to blue\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof g2b = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"green to blue\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"viewof b2b = Inputs.range([-1, 2], { value: 1, step: 0.01, label: \"blue to blue\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"viewof a2b = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"alpha to blue\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"viewof o2b = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"blue offset\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"### alpha channel","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"viewof r2a = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"red to alpha\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"viewof g2a = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"green to alpha\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"viewof b2a = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"blue to alpha\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"viewof a2a = Inputs.range([-1, 2], { value: 1, step: 0.01, label: \"alpha to alpha\" })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"viewof o2a = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"alpha offset\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"function reset(value = 0) {\n set(viewof r2r, 0);\n set(viewof g2r, 0);\n set(viewof b2r, 0);\n set(viewof a2r, 0);\n set(viewof o2r, 0);\n //\n set(viewof r2b, 0);\n set(viewof g2b, 0);\n set(viewof b2b, 0);\n set(viewof a2b, 0);\n set(viewof o2b, 0);\n //\n set(viewof r2g, 0);\n set(viewof g2g, 0);\n set(viewof b2g, 0);\n set(viewof a2g, 0);\n set(viewof o2g, 0);\n\n if (value === \"identity\") {\n set(viewof r2r, 1);\n set(viewof b2b, 1);\n set(viewof g2g, 1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"image = file?.url() ||\n \"http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}