Animated Text Background with SVG and CSS Stroke

Category: CSS & CSS3 , Text | June 21, 2014
Author: twodogstar
Views Total: 3,427
Official Page: Go to website
Last Update: June 21, 2014
License: Unknown

Preview:

Animated Text Background with SVG and CSS Stroke

Description:

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;
}

You Might Be Interested In:


Leave a Reply