<svg xmlns="http://www.w3.org/2000/svg">
    <pattern id="pattern" width="99" height="70" patternUnits="userSpaceOnUse">
        <path d="m0 67h96V35H0V32h47V0h3v32h49V0H0"/>
    </pattern>
    <filter id="filter">
        <feDropShadow dx="0" dy="0" result="s"/>
        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="9"/>
        <feComposite in="s" operator="arithmetic" k2=".7" k3=".35"/>
        <feDiffuseLighting lighting-color="#f84" surfaceScale="9">
            <feDistantLight azimuth="225" elevation="9"/>
        </feDiffuseLighting>
    </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 (553 bytes):
<svg xmlns="http://www.w3.org/2000/svg"><pattern id="a" width="99" height="70" patternUnits="userSpaceOnUse"><path d="M0 67h96V35H0v-3h47V0h3v32h49V0H0"/></pattern><filter id="b"><feDropShadow dx="0" dy="0" result="s"/><feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="9"/><feComposite in="s" operator="arithmetic" k2=".7" k3=".35"/><feDiffuseLighting lighting-color="#f84" surfaceScale="9"><feDistantLight azimuth="225" elevation="9"/></feDiffuseLighting></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