if (process.env.NODE_ENV !== 'production') {
    const cb = window.webpackHotUpdate;

    window.webpackHotUpdate = (...args) => {
        const links = document.querySelectorAll('link[rel=stylesheet]');

        for (let link of links) {
            let { href } = link;
            link.href = 'about:blank';
            link.href = href;
        }

        return cb(...args);
    }
}

import './main.scss';

const canvas = document.getElementById('js-canvas');
const ctx = canvas.getContext('2d');

function onResize(/*event*/) {
    const {
        innerHeight: height,
        innerWidth: width,
    } = window;

    canvas.height = height;
    canvas.width = width;
}

window.addEventListener('resize', onResize);
onResize();


@@ -723,12 +723,761 @@
 nResize();%0A%0A
+function part(ctx, x, y, width, height, rotation) %7B%0A    ctx.save();%0A%0A    ctx.fillStyle = 'rgba(255,255,0,0.65)';%0A    ctx.strokeStyle = 'rgba(255,0,255,0.85)';%0A%0A    ctx.translate(x, y);%0A    ctx.rotate(rotation);%0A%0A    ctx.beginPath();%0A%0A    ctx.arc(0, 0, width / 2, Math.PI, 0);%0A    ctx.lineTo(width / 2, height);%0A    ctx.arc(0, 0 + height, width / 2, 0, Math.PI);%0A%0A    ctx.closePath();%0A%0A    ctx.fill();%0A    ctx.stroke();%0A%0A    ctx.restore();%0A%7D%0A%0Afunction tick(ts) %7B%0A    window.requestAnimationFrame(tick);%0A%0A    const %7B%0A        height: h,%0A        width: w,%0A    %7D = canvas;%0A%0A    const hh = h / 2;%0A    const hw = w / 2;%0A%0A    ctx.clearRect(0, 0, w, h);%0A%0A    part(ctx, hw, hh, 40, 80, Math.PI / 4);%0A    part(ctx, hw, hh + 80, 40, 80, Math.PI / 6);%0A%7D%0Atick();%0A

add a tick function, start toying with drawing parts