<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 -->
  <clippath id="cp-text">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em"
          class="text--line"
          >
      Text
    </text>
  </clippath>

  <!-- Pattern -->
  <pattern
           id="p-lines"
           width="40"
           height="50"
           viewBox="0 0 40 50"
           patternUnits="userSpaceOnUse"
           >
    <rect
          width="100%"
          height="100%"
          fill="hsl(210,100%,50%)"></rect>

    <g stroke="rgba(255,255,255,.4)"
       stroke-width="20">
      <path d="M25,0 25,100"
            ></path>
    </g>

  </pattern>


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

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

  <!-- Group with clippath -->
  <g clip-path="url(#cp-text)">
    <!-- Content for filling text -->
    <circle r="70%"
            cx="300"
            cy="150"
            class="c-fill--color"
            ></circle>
    <circle r="70%"
            cx="300"
            cy="150"
            class="c-fill"
            ></circle>
  </g>
</svg>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text-copy-stroke {
  fill: none;
  stroke: white;
  stroke-width: 10px;
}

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

.c-fill {
  fill: url(#p-lines);
  -webkit-transform-origin: 400px 150px;
  -ms-transform-origin: 400px 150px;
  transform-origin: 400px 150px;
  -webkit-transform: rotate(32deg);
  -ms-transform: rotate(32deg);
  transform: rotate(32deg);
}

/* Fix for firefox */
.r-fill--color {
  fill: #1a8cff;
}

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

body {
  background: gold -webkit-radial-gradient(#ffd700, #ff4500);
  background: gold radial-gradient(#ffd700, #ff4500);
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

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