JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

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

CSS

html, body {
    margin:0px;
    padding:0px;
    overflow:hidden;
}
#canvas {
    background:#eee;
}

JavaScript

var dir = 0,
    dir_list = [],
    size_list = [],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = window.innerWidth,
    height = window.innerHeight;

function r2d(d) {
    return d * (Math.PI / 180);
}
function addSquare() {
    if (dir_list.length >= 25) {
        dir_list.shift();
        size_list.shift();
    }
    dir_list[dir_list.length + 1] = 0;
    size_list[size_list.length + 1] = 100;
}
function loop(dir) {
    width = window.innerWidth;
    height = window.innerHeight;
    
    canvas.width = width;
    canvas.height = height;
    
    addSquare();
    renderAll(dir_list, size_list);
    
    setTimeout(function () { loop(dir - 1); }, 10);
}
function render(direction, size) {
    ctx.beginPath();
    ctx.moveTo(width / 2 + Math.sin(r2d(direction + 0)) * size, height / 2 + Math.cos(r2d(direction + 0)) * size);
    ctx.lineTo(width / 2 + Math.sin(r2d(direction + 90)) * size, height / 2 + Math.cos(r2d(direction + 90)) * size);
    ctx.lineTo(width / 2 + Math.sin(r2d(direction + 180)) * size, height / 2 + Math.cos(r2d(direction + 180)) * size);
    ctx.lineTo(width / 2 + Math.sin(r2d(direction + 270)) * size, height / 2 + Math.cos(r2d(direction + 270)) * size);
    ctx.lineTo(width / 2 + Math.sin(r2d(direction + 0)) * size, height / 2 + Math.cos(r2d(direction + 0)) * size);
    
    ctx.lineCap = "square";
    ctx.lineWidth = 10;
    ctx.strokeStyle = "hsl(" + direction % 360 + ", 100%, 50%)";
}

function renderAll() {
    for (i=0; i <= dir_list.length; i++) {
        render(dir_list[i], size_list[i]);
    }
    ctx.stroke();
}

loop(0);