<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"
            ></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="shape-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);
}

.shape-fill {
  fill: url(#p-circles);
}

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

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

body {
  background: royalblue -webkit-radial-gradient(#4169e1, #0c1b4a);
  background: royalblue radial-gradient(#4169e1, #0c1b4a);
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

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