<canvas id="myCanvas"></canvas>

<div class="blooddrip">
  <svg id="blooddrip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 515.72"><path class="blood" d="M1366,458.61s-29.48,70.43-124.48,47.5S1120.32,376.71,1048.25,398s-132.67,86.81-204.74,49.14C739,392.51,720.67,543.78,661.71,511s-113-216.2-168.7-193.27S383.27,458.61,288.27,458.61s-68.79-85.17-150.69-72.07S0,458.61,0,458.61V0H1366Z"/></svg>
</div>

<div class="dead">
  <p>You're dead.</p>
  <span class="reset">X</span>
</div>
$blood: red;
$bloodopacity: 0.75;

html,
body {
  margin: 0;
  padding: 0;
  cursor: crosshair;
}

body {
  background: #000;
  overflow: hidden;
  font-family: 'Archivo Black', sans-serif;
}

#myCanvas {
  display: block; // get rid of padding
}

.blooddrip {
  transition: transform 2.5s ease-in-out;
  transform: translate3d(0, -1000px, 0);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  &::before {
    content: "";
    height: 1000px;
    background-color: $blood;
    opacity: $bloodopacity;
    width: 100%;
    position: absolute;
    top: -1000px;
  }
  .on & {
    transform: translate3d(0, 80%, 0);
  }
  .blood {
    fill: $blood;
    opacity: $bloodopacity;
  }
}

.dead {
  transition: transform 0.5s ease-in-out, opacity 0.75s ease-in-out;
  background: transparent;
  position: absolute;
  transform: translate3d(0, 100%, 0);
  transition-delay: 1.5s;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // onclick
  .on & {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  p {
    color: #fff;
    font-size: 10vw;
    margin: 0;
    text-transform: uppercase;
  }
  .reset {
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    border-radius: 100%;
    background: #333;
    color: $blood;
    &:hover {
      cursor: pointer;
      background: white;
      color: $blood;
    }
  }
}
View Compiled
var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");
var circleRadius = 150;
var circleFill = "rgba(255,255,255,0.2)";
var img = new Image();
img.src = "http://res.cloudinary.com/dfw908cwk/image/upload/v1487862464/MMiZLmE_baaesw.jpg";

// When bg image has loaded
img.onload = function() {

  // Get mouse movement
  var canvasPos = getPosition(canvas);
  var mouseX = 0;
  var mouseY = 0;

  canvas.addEventListener("mousemove", setMousePosition, false);

  function setMousePosition(e) {
    mouseX = e.clientX - canvasPos.x;
    mouseY = e.clientY - canvasPos.y;
  }

  // Draw a circle
  function update() {

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Clear old frames
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(mouseX, mouseY, circleRadius, 0, 2 * Math.PI, true);
    ctx.fillStyle = circleFill;
    ctx.fill();

    // CLIP THE IMAGE
    ctx.clip();

    drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height, 0.1, 0.5);

    requestAnimationFrame(update);

  }
  update();

  // Get the canvas position and adjust mouse position accordingly
  function getPosition(el) {
    var xPosition = 0;
    var yPosition = 0;

    while (el) {
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
      el = el.offsetParent;
    }
    return {
      x: xPosition,
      y: yPosition
    };
  }
}

/**
 * By Ken Fyrstenberg Nilsen
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

  if (arguments.length === 2) {
    x = y = 0;
    w = ctx.canvas.width;
    h = ctx.canvas.height;
  }

  // default offset is center
  offsetX = typeof offsetX === "number" ? offsetX : 0.5;
  offsetY = typeof offsetY === "number" ? offsetY : 0.5;

  // keep bounds [0.0, 1.0]
  if (offsetX < 0) offsetX = 0;
  if (offsetY < 0) offsetY = 0;
  if (offsetX > 1) offsetX = 1;
  if (offsetY > 1) offsetY = 1;

  var iw = img.width,
    ih = img.height,
    r = Math.min(w / iw, h / ih),
    nw = iw * r, // new prop. width
    nh = ih * r, // new prop. height
    cx, cy, cw, ch, ar = 1;

  // decide which gap to fill    
  if (nw < w) ar = w / nw;
  if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
  nw *= ar;
  nh *= ar;

  // calc source rectangle
  cw = iw / (nw / w);
  ch = ih / (nh / h);

  cx = (iw - cw) * offsetX;
  cy = (ih - ch) * offsetY;

  // make sure source rectangle is valid
  if (cx < 0) cx = 0;
  if (cy < 0) cy = 0;
  if (cw > iw) cw = iw;
  if (ch > ih) ch = ih;

  // fill image in dest. rectangle
  ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}

var body = document.getElementsByTagName('body')[0];
body.addEventListener("click", function() {
  this.classList.toggle("on");
});
Rerun