css - How to mimic PS Gradient Map effect with SVG feColorMatrix? -


i've been struggling understand svg fecolormatrix equation.

i'm more home photoshop svg scripting. in photoshop there "gradient map" adjustment layer applying gradient photo:

enter image description here

some how think should achieved svg color matrix, how?

here's simple codepen svg filter above , desired photoshop output below.

i have made filter:

<filter id="colored">   <fecolormatrix type="matrix" in="sourcegraphic"     values="0.3334 0      0      0 0             0      0.8196 0      0 0             0      0      0.6471 0 0             0      0      0      1 0 "/> </filter> 

.. not job:

enter image description here

all hints welcome!

yeah, think came pretty close combining 2 filters:

<filter id="colors">   <fecolormatrix result="a" in="sourcegraphic" type="matrix"     values="0.3333 0.3333 0.3333 0 0             0.3333 0.3333 0.3333 0 0             0.3333 0.3333 0.3333 0 0             0      0      0      1 0 "/>   </fecolormatrix>   <fecolormatrix color-interpolation-filters="srgb" in="a" type="matrix"      values="0.3334 0      0      0 0             0      0.8196 0      0 0             0      0      0.6471 0 0             0      0      0      1 0 "/>            </fecolormatrix> </filter> 

enter image description here

see codepen


Comments

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

c++ - OpenMP unpredictable overhead -

javascript - Wordpress slider, not displayed 100% width -