JSFiddle - React, Tailwind, and code Playground

by senica

HTML

<div>
    <canvas id="table"></canvas>
    <canvas id="chairs"></canvas>
</div>

CSS

div{
    width:100px;
    height:100px;
    position:relative;
}

canvas{
    position:absolute;
    left:0;
    top:0;
}

#table{
    -webkit-animation:rotateTable 2s linear infinite;
}

#chairs{
    -webkit-animation:rotateChairs 10s linear infinite;
}

@-webkit-keyframes rotateTable{  from{ -webkit-transform:rotate(0deg);} to{ -webkit-transform: rotate(360deg); }  }

@-webkit-keyframes rotateChairs{  from{ -webkit-transform:rotate(360deg);} to{ -webkit-transform: rotate(0deg); }  }

JavaScript

var canvas = $("#chairs")[0];
var scale = 0.5;
var lineWidth = $("div").width() * 0.1;
console.log(lineWidth);

var ctx = canvas.getContext('2d');
canvas.width = $("div").width();
canvas.height = $("div").height();

var width = canvas.width;
var height = canvas.height;

ctx.save();
ctx.clearRect(0, 0, width, height);
ctx.restore();

var numChairs = 4;
var chairRadius = (width * (1 - scale)) / 2 - lineWidth; 

ctx.fillStyle = "rgba(181,18,27, 1.0)";

for(var i=0; i<numChairs; i++){
    var center_x = width / 2 + ((width / 2) * scale + lineWidth / 2) * Math.cos(2 * Math.PI * (i / 4) );
    var center_y = height / 2 + ((height / 2) * scale + lineWidth / 2) * Math.sin(2 * Math.PI * (i / 4) );
    
    ctx.beginPath();
    ctx.arc(center_x, center_y, chairRadius, 0, 2*Math.PI);
    ctx.fill();
}

//Clip decorative circles
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(width / 2, height / 2, ((width / 2 - lineWidth) * scale) + lineWidth, 0, 2*Math.PI);
ctx.fill();
ctx.globalCompositeOperation = "source-over";



var canvas = $("#table")[0];
var ctx = canvas.getContext('2d');
canvas.width = $("div").width();
canvas.height = $("div").height();

ctx.lineWidth = lineWidth;

var width = canvas.width;
var height = canvas.height;

var c1 = ctx.createLinearGradient(0,height / 2 - (width / 2 - ctx.lineWidth) * scale,0,height - (width / 2 - ctx.lineWidth) * scale);
    c1.addColorStop(0, "rgba(238,238,238, 1.0)");
    c1.addColorStop(1, "rgba(238,238,238, 0)");

var c2 = ctx.createLinearGradient(0,ctx.lineWidth * 2,0,height);
    c2.addColorStop(0, "rgba(238,238,238, 1.0)");
    c2.addColorStop(1, "rgba(238,238,238, 1.0)");

//Create left clipping mask
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, width / 2, height);
ctx.clip();

ctx.strokeStyle = c1;
ctx.beginPath();
ctx.arc(width / 2, height / 2, (width / 2 - ctx.lineWidth) * scale, 0, 2*Math.PI);
ctx.stroke();
ctx.restore();

//Create right clipping mask
ctx.save();
ctx.beginPath();
ctx.rect(width /...