JSFiddle - React, Tailwind, and code Playground

by Nikos Andronikos

HTML

<!-- feTurbulence -->

<svg viewbox="0 0 512 512">
    <defs>
        <filter id="t1" filterUnits="objectBoundingBox">
            <feTurbulence x="0%" y="0%" width="100%" height="100%" baseFrequency="0.02 0.1" numOctaves="5" seed="514">
            </feTurbulence>
        </filter>
        <filter id="t2" filterUnits="objectBoundingBox">
            <feTurbulence x="0%" y="0%" width="100%" height="100%" baseFrequency="0.02 0.1" numOctaves="5" seed="514" type="fractalNoise">
            </feTurbulence>
        </filter>
    </defs>
     <rect x="10" y="10" width="40" height="40" fill="cyan"/>
   <rect x="10" y="10" width="400" height="200" fill="red" stroke="black" filter="url(#t1)" opacity="1"/>
<   <rect x="10" y="210" width="400" height="200" fill="red" stroke="black" filter="url(#t2)"/></svg>