Страница 404 виде радара с анимацией CSS3

<canvas id="gotidak-menkang"></canvas>
<div id="pasuntu-membloki">
  <h1>404 Страница не найдена</h1>
  <p>Невозможно найти страницу, так как она была удалена.</p>
</div>

#pasuntu-membloki {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding: 15px;
  max-width: 50%;
  color: #fff;
  font-family: NK57, "Lucida Console", Monaco, monospace;
}

h1 {
  font-family: NK57Bold, "Lucida Console", Monaco, monospace;
  font-weight: bold;
  margin-top: 0px;
}

@font-face {
  font-family: NK57;
  src: url(https://felisphasma.github.io/files/nk57-monospace-no-lt.ttf);
}

@font-face {
  font-family: NK57Bold;
  src: url(https://felisphasma.github.io/files/nk57-monospace-no-eb.ttf);
}

(function() {
  window.SparkleQuery = function(query, context) {
  context = context == undefined ? document : context;
  return {
  "-1": function(q) {
  return context.getElementsByTagName(q);
  },
  "0": function(q) {
  return context.getElementById(q.substr(1));
  },
  "1": function(q) {
  return context.getElementsByClassName(q.substr(1));
  }
  }[
  ["#", "."].indexOf(query[0]).toString()
  ](query);
  };
})();
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
  return window.setTimeout(callback, 1000 / 60);
  };
}());
var Query = SparkleQuery,
  canvas = Query("#gotidak-menkang"),
  ctx = canvas.getContext("2d"),
  h,
  w,

  ringSpacing = 200,

  angle = 0,

  angleStep = 1;

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
};
window.addEventListener("resize", resize, false);
resize();

function from360(angle360) {
  return Math.PI * angle360 / 180;
};

function line(x, y, len, d) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  var x1 = x + len * Math.cos(from360(d)),
  y1 = y + len * Math.sin(from360(d));
  ctx.lineTo(x1, y1);
  ctx.stroke();
};

function render() {
  // Reset canvas
  ctx.fillStyle = "#09091d";
  ctx.fillRect(0, 0, w, h);
   
  // Beam
  var renderLines = 600;
  for (i = 0; i < renderLines; i++) {
  ctx.strokeStyle = "rgb(0, "+ Math.round(200 * (i / renderLines)) +", 0)";
  line(w / 2, h / 2, 10000, angle + (i / 20));
  }
   
  // Axis
  ctx.strokeStyle = "#095f09";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(w / 2, 0);
  ctx.lineTo(w / 2, h);
  ctx.stroke();
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(0, h / 2);
  ctx.lineTo(w, h / 2);
  ctx.stroke();
   
  // Rings
  ctx.strokeStyle = "#12f513";
  for (var r = 0, m = (Math.max(w, h) / ringSpacing); r < m; r++) {
  ctx.beginPath();
  ctx.arc(w / 2, h / 2, r * ringSpacing, 0, 2 * Math.PI);
  ctx.stroke();
  }
   
  window.requestAnimFrame(render);
  angle += angleStep;
};
render();