mathsvgcolors

How do I remap the output of an SVG <feTurbulence> filter's Alpha channel to span the entire range of brightness values?


I know I can create a clean grayscale fog effect by applying an <feColorMatrix> effect to the output of an <feTurbulence> effect in order to isolate the Alpha channel:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
    <filter id="fog">
        <feTurbulence
            type="fractalNoise"
            baseFrequency="0.0078125"
            numOctaves="1"
            result="turbulence"
        />
        <feColorMatrix
            in="turbulence"
            type="matrix"
            values="0 0 0 1 0
                    0 0 0 1 0
                    0 0 0 1 0
                    0 0 0 0 1"
            result="grayscale"
        />
    </filter>
    <rect width="512" height="512" filter="url(#fog)"/>
</svg>

However, the result does not span the full range of 0% to 100% - using a color-picker, it seems to go from a minimum brightness of 45% to a maximum brightness of 85%. I want the effect to range from full-black to full-white, but haven't been able to find any resources that explain how to adjust the range that way. Does anyone here know what I need to do to achieve my goal?


Solution

  • I think it is easier to do a proper grayscale (with correct channel weightings and a constant alpha) and then add a contrast. You can adjust the strength of the contrast as you wish.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
        <filter id="fog" color-interpolation-filters="sRGB">
            <feTurbulence
                type="fractalNoise"
                baseFrequency="0.007"
                numOctaves="2"
                result="turbulence"
            />
          
      <feColorMatrix type="matrix"
                 values="0.2126  0.7152 0.0722  0 0
                         0.2126  0.7152 0.0722  0 0
                         0.2126  0.7152 0.0722  0 0
                         0 0 0 0 1"/>
      
        <feComponentTransfer>
          <feFuncR type="linear" slope="3" intercept="-1"/>
          <feFuncG type="linear" slope="3" intercept="-1"/>
          <feFuncB type="linear" slope="3" intercept="-1"/>
      </feComponentTransfer>
     </filter>
      
        <rect width="512" height="512" filter="url(#fog)"/>
    </svg>