JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<canvas id="canvas">
    Sorry, you need a newer browser.
</canvas>

CSS

body {
    margin:0px;
    padding:0px;
    overflow:hidden;
}
#canvas {
    background:#ddd;
}

JavaScript

var c = document.getElementById("canvas"),
    ctx = c.getContext("2d"),
    x = 0;

function canvasUpdate () {
    // Clears canvas and fits to window
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    
    // Var update
    x++;
    
    ctx.lineWidth = 7;
    
    var dir1 = 0;
    var dir2 = 360;
    var r = 180 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 60;
    var dir2 = x + 90;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 120;
    var dir2 = x + 150;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 180;
    var dir2 = x + 210;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 240;
    var dir2 = x + 270;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 300;
    var dir2 = x + 330;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = x + 360;
    var dir2 = x + 390;
    var r = 200 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = -x + 0;
    var dir2 = -x + 60;
    var r = 220 + Math.sin(x / 15) * 20;
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, r, dir1 / 57.3 , dir2 / 57.3 );
    ctx.stroke();
    
    var dir1 = -x + 120;
    var dir2 = -x + 180;
    var r = 220 + Math.sin(x / 15) * 20;
  ...