Search code examples
svgmatrix-multiplicationsvg-filters

SVG nested filter make white transparent


I am experimenting with a set of noise/static textures. My goal is to create a texture that looks like this: GOAL

And I've come pretty far in getting the static texture and applying it over an output of a saturate matrix, for more context see 5th, rightmost strip here

`<filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
    <feColorMatrix type="matrix" 
            values="-11 0 0 0 6
                    -11 0 0 0 6
                    -11 0 0 0 6
                    0 0 0 0 1" in="f1" result="f2" />
   <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
    <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="0" k2="1" k3="1" k4="0"/>
</filter>`

However, in place of the white texture I would like to see the Source image (ie pink gradient in the photo). I suspect it has something to do with converting the white values to alpha. However when I tried filtering the noise with luminanceToAlpha first then merging I had to use a different operator and resulting noise did not inherit the color from the saturate filter.


Solution

  • I think you're looking for a multiply rather than an add - this combination of k's work better for your feComposite/arithmetic

     <filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
      <feColorMatrix type="matrix" 
            values="-11 0 0 0 6
                                        -11 0 0 0 6     
                                        -11 0 0 0 6      
                                        0 0 0 0 1" in="f1" result="f2" />
      <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
      <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="1" k2="0" k3=".6" k4="0" />   
    
     </filter>