<svg xmlns="http://www.w3.org/2000/svg">
    <pattern id="pattern" width="13" height="13" patternUnits="userSpaceOnUse">
      <circle r="1"/>
    </pattern>
    <filter id="filter">
        <feTurbulence baseFrequency=".1"/>
        <feComposite in2="SourceAlpha" operator="in"/>
        <feMorphology operator="dilate" radius="5"/>
        <feColorMatrix values="1 0 0 0 0
                               0 .8 0 0 0
                               0 0 0 0 .05
                               0 0 0 400 -40"/>
        <feConvolveMatrix kernelMatrix="-1 -1 -1
                                        -1  8 -1
                                        -1 -1 -1" preserveAlpha="false" result="s"/>
        <feFlood/>
        <feBlend in="s"/>
    </filter>
    <rect width="100%" height="100%" fill="url(#pattern)" filter="url(#filter)"/>
</svg>
/* Add the seed attribute and set it to a random integer in <feTurbulence> to create your own variant! */
/* Minified (524 bytes):
<svg xmlns="http://www.w3.org/2000/svg"><pattern id="a" width="13" height="13" patternUnits="userSpaceOnUse"><circle r="1"/></pattern><filter id="b"><feTurbulence baseFrequency=".1"/><feComposite in2="SourceAlpha" operator="in"/><feMorphology operator="dilate" radius="5"/><feColorMatrix values="1 0 0 0 0 0 .8 0 0 0 0 0 0 0 .05 0 0 0 400 -40"/><feConvolveMatrix kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" result="s"/><feFlood/><feBlend in="s"/></filter><rect width="100%" height="100%" fill="url(#a)" filter="url(#b)"/></svg>
*/

External CSS

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

External JavaScript

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