How it works

The .png image below is clipped with animated text.

enter image description here

Sample in action:

 body { background: #000000; } .Wave-Loader { text-transform: uppercase; font-family: 'Cabin Condensed', sans-serif; font-weight: bold; font-size: 100pt; text-align: center; height: 120px; line-height: 110px; vertical-align: bottom; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; } .Wave-Loader.Wave { background-image: url("http://i.imgur.com/uFpLbYt.png"); -moz-background-clip: text; -o-background-clip: text; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0px 0px rgba(255, 255, 255, 0.06); animation: Wave-Loader 1s infinite linear; background-size: 200px 100px; background-repeat: repeat-x; opacity: 1; } @keyframes Wave-Loader { 0% { background-position: 0 bottom; } 100% { background-position: 200px bottom; } } 
 <div class="Wave-Loader Wave">loading</div>

Question

Instead of using an image, how can I replace only the CSS form, since I would like to implement my color animation, which will change the color of the white wave that you see in my demonstration above, from red to green.

NOTE. The black background is used only for StackOverflow , whereas my background may differ in color.

Wave Effect Examples

 #wave { position: relative; height: 70px; width: 600px; background: #000000; } #wave:before { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 340px; height: 80px; background-color: white; right: -5px; top: 40px; } #wave:after { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 300px; height: 70px; background-color: #000000; left: 0; top: 27px; } 
 <div id="wave"></div> 

 svg { display: inline-block; position: absolute; top: 0; left: 0; } .container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } 
 <div class="container"> <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path> </svg> </div>

1 answer 1

You can achieve filling the text with an animated wave using several methods:

The following is an SVG solution using the pattern element.
The text is filled with a wave pattern, and the drawing is animated with SMIL animation.

Here's what it looks like:

enter image description here

This approach will allow you to fill the pattern not a simple background (for example, a gradient), and also allow you to display text on top of the image or any asymmetric background.

You can see it in action here: Animated wave, cut off with text.

 body,html{margin:0;padding:0;height:100%;} body{ background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'); 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:600px;height:auto;} 
 <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" fill="url(#gradient)"> <animateTransform attributeName="transform" type="translate" begin="0s" dur="1.5s" 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>