Trying to convert this code:
.wavy-text{filter:url('#wavy')} <h1 class="wavy-text">Wavy Text Generator</h1>
<svg width="100%" height="100%" style="display:none;">
<defs>
<filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
<feTurbulence id="wave-animation" numOctaves="1" seed="1" baseFrequency="0 0"></feTurbulence>
<feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
</filter>
<animate xlink:href="#wave-animation" attributeName="baseFrequency" dur="3s" keyTimes="0;0.5;1" values="0.0 0.04;0.0 0.07;0.0 0.04" repeatCount="indefinite">
</animate>
</defs>
</svg>- into component in React with Next.js. So I would like to use it as a component where I can put my own text and re-use it, but I got no idea how to convert that kind of code into React Next friendly mode.
Where does that code even take itss css class .wavy-text styles?
Original source for the code: http://www.coding-dude.com/wp/wavy-text-generator/