I'm trying to create a transparent "starry night" effect with an SVG. I have my SVG inlined on a webpage, inside an element with a black background. I start out with a turbulence filter, then apply a color matrix to get the desired effect:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="filter">
<feTurbulence baseFrequency="0.2" />
<feColorMatrix values="
0 0 0 1 -.5
0 0 0 1 -.5
0 0 0 1 -.5
0 0 0 0 1" />
</filter>
<rect width="100%" height="100%" filter="url(#filter)" />
</svg>
... which gives:
But this has no alpha transparency; I want this to represent a plane of white pixels whose brightness is reduced only by being on a black background and having less opacity. So I put it through a second filter to do this:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="filter">
<feTurbulence baseFrequency="0.2" />
<feColorMatrix values="
0 0 0 1 -.5
0 0 0 1 -.5
0 0 0 1 -.5
0 0 0 0 1" />
<feColorMatrix values="
0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
1 1 1 0 0" />
</filter>
<rect width="100%" height="100%" filter="url(#filter)" />
</svg>
... which gives:
This is very similar, but slightly darker. Why is it slightly darker? Shouldn't it logically produce identical pixel colours when overlayed on a black background?

