A Pen by sync101.

index.html

<div class="l--wrapper">
  <svg>
    <pattern id="pt--water" viewBox="0 0 256 256"
         width="256" height="256" patternUnits="userSpaceOnUse">
      <image xlink:href="http://img-fotki.yandex.ru/get/9931/5091629.a0/0_835bb_35485e4a_XL" width="256" height="256"/>
    </pattern>
    
    <pattern id="pt--fire" viewBox="30 100 186 200"
         width="216" height="200" patternUnits="userSpaceOnUse"
             x="-60" y="-100">
      <image xlink:href="http://img-fotki.yandex.ru/get/9742/5091629.a0/0_835bc_b77f8d28_orig" width="256" height="300"/>
    </pattern>
    
    

    <text x="50%" y="155" class="t--water" text-anchor="middle">Water</text>
    <text x="50%" y="280" class="t--and" text-anchor="middle">&</text>
    <text x="50%" y="470" class="t--fire" text-anchor="middle">Fire</text>
    
<!--     <rect width="400" height="400"></rect> -->
  </svg>
</div>

Selectable-text-with-animated-backgrounds.markdown

Selectable text with animated backgrounds

SVG + CSS + GIF

Too heavy backgrounds : (

Forked from yoksel's Pen Selectable text with animated backgrounds.

A Pen by sync101 on CodePen.

License.

style.scss

$oneline-height: 180px;

@import url(http://fonts.googleapis.com/css?family=Francois+One);

BODY {
  background: #000;
  }

.l--wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 485px;
  height: $oneline-height*3;
}

svg {
  width: 485px;
  height: $oneline-height*3;
/*   border: 1px solid red; */
  }

text {
  stroke-width: 10;
  stroke-opacity: .5;
  font-family: 'Francois One', sans-serif;
  font-size: 12em;
  }
.t--water {
  fill: url(#pt--water);
  stroke: darken(dodgerblue, 30%);
}

.t--fire {
  fill: url(#pt--fire);
  stroke: darken(red, 35%);
}

.t--and {
  fill: none;
  stroke-width: 5;
  stroke: darken(lightslategrey, 27%);
  font-size: 7em;
}

rect {
  fill: url(#pt--fire);
  stroke: darken(red, 35%);
}