<!-- Invisible SVG -->
<svg viewBox="0 0 600 600" 
     class="svg-defs">

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

  <!-- Mask with text -->
  <mask id="m-text"
        maskunits="userSpaceOnUse"
        maskcontentunits="userSpaceOnUse">

    <rect
          width="100%"
          height="100%"
          class="mask__shape">
    </rect>
    <use xlink:href="#s-text"
         class="mask__text"
         ></use>

  </mask>

  <!-- Pattern with lines -->
  <pattern
           id="p-lines"
           width="10"
           height="10"
           viewBox="0 0 10 10"
           patternUnits="userSpaceOnUse"
           >
    <rect
          width="100%"
          height="100%"
          class="p-rect"></rect>    
    <path d="M10,0 0,10"
          class="p-path"
          ></path>
  </pattern>
</svg>

<div class="box-with-text">

  <!-- Container for video -->
  <div class="text-fill">
    <video 
           class="video" src="http://tympanus.net/codrops-playground/assets/images/posts/23145/bokeh2.mp4"
           autoplay loop
           ></video>
  </div>

  <!-- Visible SVG -->
  <svg viewBox="0 0 600 600"
       class="svg-inverted-mask">
    <!-- Big shape with hole in form of text -->
    <circle r="47%"
            cx="50%"
            cy="50%"
            class="shape--fill"
            mask="url(#m-text)"
            ></circle>
    <!-- Shape with stroke -->
    <circle r="48.5%"
            cx="50%"
            cy="50%"
            class="shape--stroke"
            ></circle>
    <!-- Text with stroke -->
    <use xlink:href="#s-text"
         class="text--stroke"
         ></use>
  </svg> 
</div>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.mask__shape {
  fill: white;
}

.p-rect {
  fill: rgba(238, 167, 101, 0.55);
  fill-opacity: 0.2;
}

.p-path {
  stroke: #bf8651;
  stroke-width: 1;
}

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

.shape--stroke {
  fill: none;
  stroke-width: 3;
  stroke-opacity: 0.4;
  stroke: #bf8651;
}

.text--stroke {
  fill: none;
  stroke-width: 3;
  stroke-opacity: 0.4;
  stroke: #bf8651;
}

.box-with-text {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

.text-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video {
  display: block;
  position: absolute;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

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

body {
  background: #a2876e;
  font: 12em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

.svg-inverted-mask {
  position: absolute;
  width: 100%;
  height: 100%;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}