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.
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>