Animated Text Background with SVG and CSS Stroke

A cool text effect created by yoksel that fill your text with an animated GIF background, based on SVG and CSS stroke properties.

How to use it:

Create an SVG element that contains your text and a SVG pattern.

<svg>
  <pattern id="pt--demo" viewBox="0 0 256 256" width="256" height="256" patternUnits="userSpaceOnUse">
      <image xlink:href="1.gif" width="256" height="256"/>
  </pattern>
  <text x="50%" y="155" class="t--demo" text-anchor="middle">Demo</text>
</svg>

Fill the text with the SVG pattern made up from images.

text {
  stroke-width: 10;
  stroke-opacity: .5;
  font-size: 12em;
}
.t--demo {
  fill: url(#pt--demo);
  stroke: #004384;
}