Issue

This Content is from Stack Overflow. Question asked by koodikari

Trying to convert this code:

<style>.wavy-text{filter:url('#wavy')}</style>
<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/

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.