CSS Wavy Font Animation

css-wavy-font-animation.markdown

CSS Wavy Font Animation

If you need a free font that looks like this wave effect you can download the free wavy font from PhotoshopSupply

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap" rel="stylesheet">


<h1 class="wavy-font">Wavy Font CSS</h1>
<svg width="100%" height="100%" style="display:none;">
  <defs>
<filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
    <feTurbulence id="wave-animation" numOctaves="0.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"/>
    </defs>
  </defs>
</svg>

If you need a free font that looks like this wave effect you can download the free <a href="https://www.photoshopsupply.com/layer-styles/wavy-font">wavy font</a> from <a href="https://www.photoshopsupply.com">PhotoshopSupply</a>

style.css

.wavy-font{
  font-family:'Raleway';
  text-transform:uppercase;
  font-size:60px;
  line-height:1.2em;
  filter:url(#wavy)
}