<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence type="fractalNoise" baseFrequency="0.006" numOctaves="2"/>
        <feComponentTransfer>
            <feFuncA type="discrete" tableValues="0 1 0"/>
        </feComponentTransfer>
        <feColorMatrix values="0 0 0 1 0
                               0 0 0 1 0
                               0 0 0 1 0
                               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 (345 bytes):
<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feTurbulence type="fractalNoise" baseFrequency=".006" numOctaves="2"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 1 0"/></feComponentTransfer><feColorMatrix values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 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