thers/wtf.html

## wtf.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    html, body {
      padding: 0;
      margin: 0;
    }

    div {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;

      background-image: url(test.jpg);
      background-size: cover;
    }

    canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }
  </style>
</head>
<body>

<div></div>
<canvas id="t" style="width: 100%; height: 100%"></canvas>

<script>
  (() => {
    const $cvs = document.getElementById('t');
    const width = $cvs.width = window.screen.availWidth; $cvs.style.width = `${width}px`;
    const height = $cvs.height = window.screen.availHeight; $cvs.style.height = `${height}px`;
    const ctx = $cvs.getContext('2d');

    const endAngle = Math.PI * 2;

    let cols = false;
    let rows = false;
    let xOffset = false;
    let yOffset = false;
    let count = false;

    function drawCircles(spaceBetween, R) {
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = '#000';
      ctx.beginPath();

      if (!cols) {
        cols = Math.ceil(width / spaceBetween) + 1;
        rows = Math.ceil(height / spaceBetween);

        xOffset = width / cols - (width - (cols * spaceBetween - 1)) / cols;
        yOffset = height / rows - (height - (rows * spaceBetween + 1)) / rows;

        count = cols * rows;
      }

      for (let i = 0; i < count; i++) {
        const nxOffset = xOffset * (i%cols);
        const nyOffset = yOffset * parseInt(i/cols);

        i % cols === 0 && ctx.moveTo(nxOffset, nyOffset);

        ctx.arc(nxOffset, nyOffset, Math.abs(Math.sin(i/count*10*Math.cos(i)) * R), 0, endAngle);
      }

      ctx.closePath();
      ctx.fill();
    }

    function drawWhite() {
      ctx.globalCompositeOperation = 'source-out';
      ctx.fillStyle = 'rgba(255, 255, 255, .5)';
      ctx.fillRect(0, 0, width, height);
    }

    const R = 20;

    function animate(t) {
      const newR = R - Math.abs(Math.sin(t/500) * R);

      if (newR > 0) {
        drawWhite();
        drawCircles(40, newR);
      }

      window.requestAnimationFrame(animate);
    }

    animate();
  })()
</script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<style>
	html, body {
	padding: 0;
	margin: 0;
	}

	div {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	background-image: url(test.jpg);
	background-size: cover;
	}

	canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	}
	</style>
	</head>
	<body>

	<div></div>
	<canvas id="t" style="width: 100%; height: 100%"></canvas>

	<script>
	(() => {
	const $cvs = document.getElementById('t');
	const width = $cvs.width = window.screen.availWidth; $cvs.style.width = `${width}px`;
	const height = $cvs.height = window.screen.availHeight; $cvs.style.height = `${height}px`;
	const ctx = $cvs.getContext('2d');

	const endAngle = Math.PI * 2;

	let cols = false;
	let rows = false;
	let xOffset = false;
	let yOffset = false;
	let count = false;

	function drawCircles(spaceBetween, R) {
	ctx.globalCompositeOperation = 'destination-out';
	ctx.fillStyle = '#000';
	ctx.beginPath();

	if (!cols) {
	cols = Math.ceil(width / spaceBetween) + 1;
	rows = Math.ceil(height / spaceBetween);

	xOffset = width / cols - (width - (cols * spaceBetween - 1)) / cols;
	yOffset = height / rows - (height - (rows * spaceBetween + 1)) / rows;

	count = cols * rows;
	}

	for (let i = 0; i < count; i++) {
	const nxOffset = xOffset * (i%cols);
	const nyOffset = yOffset * parseInt(i/cols);

	i % cols === 0 && ctx.moveTo(nxOffset, nyOffset);

	ctx.arc(nxOffset, nyOffset, Math.abs(Math.sin(i/count10Math.cos(i)) * R), 0, endAngle);
	}

	ctx.closePath();
	ctx.fill();
	}

	function drawWhite() {
	ctx.globalCompositeOperation = 'source-out';
	ctx.fillStyle = 'rgba(255, 255, 255, .5)';
	ctx.fillRect(0, 0, width, height);
	}

	const R = 20;

	function animate(t) {
	const newR = R - Math.abs(Math.sin(t/500) * R);

	if (newR > 0) {
	drawWhite();
	drawCircles(40, newR);
	}

	window.requestAnimationFrame(animate);
	}

	animate();
	})()
	</script>

	</body>
	</html>