<svg viewBox="0 0 600 300">

  <!-- Gradient -->
  <radialGradient id="gr-radial"
                  cx="50%" cy="50%" r="70%"
                  >
    <!-- Animation for radius of gradient -->
    <animate attributeName="r" 
             values="0%;150%;100%;0%"
             dur="5s" repeatCount="indefinite" />
    <!-- Animation for colors of stop-color -->
    <stop stop-color="#FFF" offset="0">
      <animate attributeName="stop-color" 
               values="#333;#FFF;#FFF;#333"
               dur="5s" repeatCount="indefinite" />
    </stop>
    <stop stop-color="rgba(55,55,55,0)" offset="100%"/>
  </radialGradient>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text"
        >
    Text
  </text>
</svg>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: url(#gr-radial);
}

/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
  background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
  background-size: .2em 100%;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
	margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}