<svg class="overlay text" viewBox="0 0 900 400">
    <symbol id="main">
      <text text-anchor="middle" x="50%" y="50%" dy="0.25em" class="txt">404</text>
      <text text-anchor="middle" x="50%" y="90%" dy="0.25em" class="txt2">Not Found</text>
    </symbol>
    <mask id="msk" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
      <rect width="100%" height="100%" class="wrap">
      </rect>
      <use xlink:href="#main" class="mtxt"></use>
    </mask>
  </svg>
      <section>
        <h1 href="#">
          <div class="fill">
<canvas id="canv" width = "460" height = "360" style=background: hsla(0, 0%, 0%, 1);>
</canvas>
          </div>
          <svg viewBox="0 0 100% 100%" class="inv">
            <rect width="100%" height="100%" mask="url(#msk)" 
      class="rect" />
            <use xlink:href="#main" class="clear"></use>
          </svg>
        </h1>
      </section>

@import url(https://fonts.googleapis.com/css?family=Black+Ops+One);

* { box-sizing: border-box; }

html, body {
  background: hsla(0, 0%, 90%, 1);
  width:100%; 
  min-height:100%;
  font-weight: bold;
  font-size: 1em;
  display:flex;
  justify-content:center;
  flex-direction:column;
  font-family: 'Black Ops One', cursive;
  user-select:none;
}
canvas{
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate( -50%, -50%);
}
.text .wrap {
  fill: #FFF;
}

.overlay {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  & .txt {
    font-size: 14rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing:-.5rem;
    text-shadow: 0 -3px 0 hsla(0, 0%, 5%, 1),
    0 6px 8px  hsla(0, 0%, 5%, .55),
    0 9px 10px  hsla(0, 0%, 5%, .25);
  }
  & .txt2{
     font-size:4rem;
  }
}
section{
  align-self:center;
}
h1{
  position: relative;
  font-size: 8em;
  font-weight:bold;
  line-height: 1;
  display: inline-block;
  width: 900px;
  height: 400px;
  & .fill {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  & .inv {
    position: absolute;
    width: 900px;
    height: 400px;
    top: 0;
    left: 0;
  }
  & .rect {
    fill:hsla(0, 0%, 90%, 1);
  }
  & .clear {
    fill:transparent;
  }
}

c = document.getElementById("canv");
$ = c.getContext("2d");
w = c.width;
h = c.height;
id = $.createImageData(w, h);

function draw() {
  window.requestAnimationFrame(draw);
    var r;
    for (var p = 4 * (w * h - 1); p >= 0; p -= 4) {
        r = Math.random();
        id.data[p] = id.data[p+1] = id.data[p+2] = 255 * Math.pow(r, 1.6);
        id.data[p+3] = 255;
    }
    $.putImageData(id, 0, 0);
}

draw();