2e:null 2f:["$","title",null,{"children":"Filter Effects using SVG Color Matrices | Spencer | Observable"}] 34:T5fa,html` `35:[] 32:{"id":"e528e3662808e3dc","slug":"filter-effects-using-svg-color-matrices","title":"Filter Effects using SVG Color Matrices","thumbnail":"3fa4ecffb3cedf34ba0b72c3cf39b4a625060f18cf5b55be552e6f1d3960543b","access_level":"public","create_time":"$D2021-11-30T15:36:11.129Z","update_time":"$D2021-11-30T21:54:22.203Z","view_time":null,"first_public_time":"$D2021-11-30T21:49:12.058Z","has_unpublished_edits":null,"fork":{"id":"510506fa6b4cfc5a","slug":"filter-effects-using-svg-color-matrices","title":"Filter Effects using SVG Color Matrices","owner":{"id":"81f4cc2c1d6a622e","login":"gitmullany","name":"Michael Mullany"}},"stars":2,"starred":false,"owner":{"type":"team","id":"176964fb427d7dd9","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":"starter_2024"},"version":693,"publish_version":693,"role":null,"authored":false,"authors":[{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null}],"members":[{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null,"role":"editor"}],"comments":[{"id":"095ab9309d1ae66c","reply_to_id":null,"content":"(changes v. origin) use observable inputs, adds greyscale presets, allow DIY file upload","create_time":"$D2021-11-30T21:51:05.540Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ec7fd3c97f069228","slug":"forks","title":"forks","owner":{"id":"176964fb427d7dd9","login":"spensaur","name":"Spencer"}},"type":"notebook","body":{"title":"Filter Effects using SVG Color Matrices","cells":[{"id":0,"value":"md`# Filter Effects using SVG Color Matrices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof file = Inputs.file({\n label: \"Bring Your Own Image\",\n accept: \".png,.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"Inputs.button([\n\n [\n \"zero out\",\n () => {\n reset();\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"### red channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"viewof o2r = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"red offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"### green channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"viewof o2g = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"green offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"### blue channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"viewof o2b = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"blue offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"### alpha channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"viewof o2a = Inputs.range([-1, 2], { value: 0, step: 0.01, label: \"alpha offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"