Skip to content

Instantly share code, notes, and snippets.

@thers

thers/wtf.html

Created October 5, 2016 17:17
Download ZIP

Revisions

  1. thers created this gist Oct 5, 2016.
    108 changes: 108 additions & 0 deletions wtf.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <!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>