<svg viewBox="0 0 600 300">

  <!-- Symbol with text -->
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="50%"
          dy=".35em"
          class="text--line"
          >
      Text
    </text>    
  </symbol>

  <!-- Clippath  with text -->
  <clippath id="cp-text">
    <text text-anchor="middle"
          x="50%"
          y="50%"
          dy=".35em"
          class="text--line"
          >
      Text
    </text>
  </clippath>

  <!-- Pattern -->
  <pattern
           id="p-circles"
           width="40"
           height="40"
           viewBox="0 0 40 40"
           patternUnits="userSpaceOnUse"
           >

    <circle 
            r="12" cx="20" cy="20"
            class="c-ring"
            ></circle>
    <circle 
            r="5" cx="20" cy="20"
            class="c-ring c-ring--fill"
            ></circle>

    <circle 
            r="12" cx="0" cy="0"
            class="c-ring"
            ></circle>
    <circle 
            r="12" cx="40" cy="0"
            class="c-ring"
            ></circle>
    <circle 
            r="12" cx="40" cy="40"
            class="c-ring"
            ></circle>
    <circle 
            r="12" cx="0" cy="40"
            class="c-ring"
            ></circle>

    <circle 
            r="5" cx="0" cy="0"
            class="c-ring"
            ></circle>
    <circle 
            r="5" cx="40" cy="0"
            class="c-ring"
            ></circle>
    <circle 
            r="5" cx="40" cy="40"
            class="c-ring"
            ></circle>
    <circle 
            r="5" cx="0" cy="40"
            class="c-ring"
            ></circle>

  </pattern>

  <!-- Copy of text for shadow -->
  <use xlink:href="#s-text"
       class="text-copy--shadow"></use>

  <!-- Group with clippath and with patterned content -->
  <g clip-path="url(#cp-text)">

    <circle r="70%"
            cx="300"
            cy="150"
            class="r-fill"
            ></circle>
  </g>

  <!-- Copy of text for stroke -->
  <use xlink:href="#s-text"
       class="text-copy--stroke"></use>

</svg>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text-copy--stroke {
  fill: transparent;
  stroke: white;
  stroke-width: 4;
}

.text-copy--shadow {
  fill: rgba(0, 0, 0, 0.25);
  -webkit-transform: translate(0.06em, 0.06em);
  -ms-transform: translate(0.06em, 0.06em);
  transform: translate(0.06em, 0.06em);
}

.r-fill {
  fill: url(#p-circles);
  -webkit-transform-origin: 300px 150px;
  -ms-transform-origin: 300px 150px;
  transform-origin: 300px 150px;
  -webkit-animation: rotate 30s infinite linear;
  animation: rotate 30s infinite linear;
}

.c-ring {
  fill: none;
  stroke-width: 2;
  stroke: white;
}

.c-ring--fill {
  fill: white;
  stroke-width: 0;
  stroke: white;
  -webkit-animation: stroke 5s infinite;
  animation: stroke 5s infinite;
}

@-webkit-keyframes stroke {
  50% {
    stroke-width: 15;
  }
}

@keyframes stroke {
  50% {
    stroke-width: 15;
  }
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Other styles */
HTML, BODY {
  height: 100%;
}

body {
  background: hotpink -webkit-radial-gradient(#ff69b4, #9c004e);
  background: hotpink radial-gradient(#ff69b4, #9c004e);
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

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