Animated Text Background with SVG and CSS Stroke

Category: CSS & CSS3 , Text | June 21, 2014
Views Total:1,342 views
Official Page:Go to website
Last Update:June 21, 2014


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.

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

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;

You Might Be Interested In:

Leave a Reply