Animating Text Background (SVG and CSS3)

In this article I'll share two effects I obtained when I was playing with SVG and CSS3 animations, We will create 2 text background animations, the first example is a text with a rainbow colored background and will be animated on hover, and for the second example the text will have a continuous background animation (disco lighting effect).

The idea is simple, we will create a Div with an animated background, we will use Css3 to draw a background pattern and apply a css3 animation or translation. Then, inside that Div we place an SVG object containing the text mask.

In the final result, the background animation will only be visible within the boundaries of the text shape.

1st example (Rainbow hover effect) :

Html markup :

<div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="5" y="65" id="theText" fill="#000">Welcome to Codicode</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>

The Svg object is composed of a rectangle to which we will apply an Svg mask (theMask) containing two objects: a rectangle and our displayed text. To change the background color just change the main rectangle fill color.

Note that the SVG object will fill all the Div’s size, that’s because we need to hide all the Css3 background graphics and animation.

Css Markup :

body
{
  background-color:#fff;
}

#bkDiv
{
  // The rainbow Css3 pattern
  background: linear-gradient(0deg, transparent 0%, #31009c 10%, #000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,transparent 100%);
  background-color: #333;
  background-size: 10px 125px;
  background-repeat : repeat;
  height : 100px;
  width : 620px;
 
  background-position:center -65px;
  transition: background-position 1s;
}

#bkDiv:hover
{
  // on Hover the background translates 65px down
  background-position:center 0px;
}

#theText
{
  font-family:Impact, Charcoal, sans-serif;
  font-size:65px;
  stroke:#000;
  stroke-width:3px;
  fill-opacity:0.5;
}

When the background div is hovered, the Css3 background will transition, and will regain its original position back when the mouse is out, the transition duration is set to 1 second here.

Also the text has 50% transparency and a 3px back stroke (100% opaque) to get the outline effect.

2nd example (Disco lighting effect) :

Html markup :

<div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="0" y="120" id="theText" fill="#000">Night CLUB</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>

This html markup is the same as in the first example.

Css Markup :

body
{
  background-color:#fff;
}

#bkDiv
{
  // Red dots Css3 pattern
  background: linear-gradient(-45deg, #036 30%,transparent 45%,transparent 55%,#036 70%),
              linear-gradient(45deg, #036 30%,transparent 45%,transparent 55%,#036 70%);
  background-color: #f00;
  background-size: 15px 15px;
  background-position:0px 0px;
  height:150px;
  width:550px;
  // Animating red dots (infinite loop)
  animation: cAnim 1s linear 0s infinite;
}

@keyframes cAnim
{
  100% {background-position:15px 0px;}
}

#theText
{
  font-family:Impact, Charcoal, sans-serif;
  font-size:120px;
  stroke:#000;
  stroke-width:5px;
  fill-opacity:0.1;
  stroke-opacity:1;
  // Strobe light effect animation
  animation: cAnim1 0.5s linear 0s infinite;
}
@keyframes cAnim1
{
  100% {fill-opacity:0.9;stroke-opacity:0.5;}
}

Two simultaneous animations are rendered in this example, the first is the red moving dots and this animation is applied to the div background, and the second is the strobe light effect and it is applied to the SVG mask text.

SVG (Scalable Vector Graphics) is an open HTML standard technology developed by the World Wide Web Consortium (W3C) for building and rendering web pages and is supported by all current versions of all major browsers. And even if it is not as widely used as it deserves to be, it’s gaining ground every day.

I hope you enjoyed this article, and like always, feel free to leave any comments or questions in the comments section.