<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 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="-.08  .42  .09 0 .08
                               -.17  .35 -.08 0 .17
                               -.08  .15 -.04 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 (536 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 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="-.08 .42 .09 0 .08 -.17 .35 -.08 0 .17 -.08 .15 -.04 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.css

External JavaScript

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