Animated text with wave effect using SVG - HTML CSS CSS

HTML CSS examples for CSS:Animation

  1. HOME
  2. HTML CSS
  3. CSS
  4. Animation

Description

Animated text with wave effect using SVG

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Animated wave clipped by text</title> 
  <style>
body,html {
   margin:0;
   padding:0;
   height:100%;
}

body {<!--   w  w  w.j  a  va  2 s  .c o m-->
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:cover;
   font-family:'Cabin Condensed', sans-serif;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
}

svg {
   font-weight:bold;
   max-width:601px;
   height:auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <svg viewbox="0 0 100 20"> 
   <defs> 
    <lineargradient id="gradient" x1="0" x2="0" y1="0" y2="1"> 
     <stop offset="5%" stop-color="#326384" /> 
     <stop offset="95%" stop-color="#123752" /> 
    </lineargradient> 
    <pattern id="wave" x="0" y="0" width="120" height="20" patternunits="userSpaceOnUse"> 
     <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 
      <animatetransform attributeName="transform" begin="0s" dur="1.5s" type="translate" from="0,0" to="40,0" repeatCount="indefinite" /> 
     </path> 
    </pattern> 
   </defs> 
   <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.6">
     LOADING 
   </text> 
   <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">
     LOADING 
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials