<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3"/>
        <feComponentTransfer>
            <feFuncR type="discrete" tableValues="0 0 0 0 1 1"/>
            <feFuncG type="discrete" tableValues="0 0 0 1 1"/>
            <feFuncB type="discrete" tableValues="0 1"/>
        </feComponentTransfer>
        <feColorMatrix values="1  0 0 0 0
                              -1  1 0 0 0
                              -1 -1 1 0 0
                               0  0 0 0 1"/>
        <feColorMatrix values="-0.08  0.42  0.09 0 0.08
                               -0.17  0.35 -0.08 0 0.17
                               -0.08  0.15 -0.04 0 0.08
                                0    0     0    0 1"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)"/>
</svg>
/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
/* Minified (554 bytes):
<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="3"/><feComponentTransfer><feFuncR type="discrete" tableValues="0 0 0 0 1 1"/><feFuncG type="discrete" tableValues="0 0 0 1 1"/><feFuncB type="discrete" tableValues="0 1"/></feComponentTransfer><feColorMatrix values="1 0 0 0 0 -1 1 0 0 0 -1 -1 1 0 0 0 0 0 0 1"/><feColorMatrix values="-0.08 0.42 0.09 0 0.08 -0.17 0.35 -0.08 0 0.17 -0.08 0.15 -0.04 0 0.08 0 0 0 0 1"/></filter><rect width="100%" height="100%" filter="url(#a)"/></svg>
*/

External CSS

  1. https://codepen.io/finnhvman/pen/ExgLjmg

External JavaScript

  1. https://codepen.io/finnhvman/pen/ExgLjmg