Cool text wave animation effects based on HTML5 SVG,

Cool text wave animation effects based on HTML5 SVG,

This is a cool text Wave Effect Based on HTML5 SVG. This text wave animation effect uses the SVG mask and CSS hybrid mode in the text to make the effect of the wave movement, just like there is a sea in the text, the effect is very cool.

Method of use: HTML Structure

Download Online Preview source code

In SVG, use<pattern>Elements are used as the pattern of wave movement.<text>The element is text, in the groupg#effUse four rectangles as the text mask layer, and set their CSS mixed modecolor-burn.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   width="450px" height="240px" xml:space="preserve">  <defs>    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">      <path fill="#000" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>    </pattern>        <text id="text" transform="translate(2,116)" font-family="'Cabin Condensed'" font-size="161.047">OCEAN</text>        <mask id="text-mask">      <use x="0" y="0" xlink:href="#text" opacity="1" fill="#ffffff"/>    </mask>        <g id="eff">      <use x="0" y="0" xlink:href="#text" fill="#a2a3a5"/>    <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-300" y="50" width="1200" height="120" opacity="0.3">    <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="2s"/>  </rect>   <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="45" width="1600" height="120" opacity="0.3">    <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="3s"/>  </rect>        <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="800" height="120" opacity="0.3">    <animate attributeType="xml" attributeName="x" from="-200" to="0" repeatCount="indefinite" dur="1.4s"/>  </rect>      <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="2000" height="120" opacity="0.3">    <animate attributeType="xml" attributeName="x" from="-500" to="0" repeatCount="indefinite" dur="2.8s"/>  </rect>    </g>  </defs>     <use xlink:href="#eff" opacity="0.9" style="mix-blend-mode:color-burn"/></svg>