JSFiddle - React, Tailwind, and code Playground

by MacroMeez

HTML

<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence id="t1" type="turbulence" baseFrequency="0.015"
        numOctaves="3" seed="1" result="turbulence" style="filter: url(#offset)"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
<animate href="#t1" attributeName="seed" values="1;300" dur="30s" repeatCount="indefinite" />

<rect x="-86" width="398" height="226" fill="url(#paint0_linear)"  style="filter: url(#displacementFilter)"/>
<rect x="-86" width="398" height="226" fill="url(#paint1_linear)"  style="filter: url(#displacementFilter)"/>
<defs>
<linearGradient id="paint0_linear" x1="113" y1="0" x2="113" y2="226" gradientUnits="userSpaceOnUse">
<stop offset="0.197917" stop-color="#F80000" stop-opacity="0"/>
<stop offset="1" stop-color="#F80000"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="113" y1="0" x2="113" y2="226" gradientUnits="userSpaceOnUse">
<stop offset="0.197917" stop-color="#F80000" stop-opacity="0"/>
<stop offset="1" stop-color="#F8EE00"/>
</linearGradient>
</defs>

</svg>