JSFiddle - React, Tailwind, and code Playground

by Boro

CSS

canvas {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

//the coordinates of the grid
this.x = 100;
this.y = 200;
this.width = 20;
this.height = 20;
this.rotation = 0; //angle (in radians) by what to rotate

ctx.translate(x + width / 2, y + height / 2);
ctx.rotate(this.rotation);
ctx.beginPath();
ctx.fillStyle = "#00f";
ctx.arc(0, 0, width / 2, 0, 2 * Math.PI);
ctx.fill();
ctx.strokeStyle = "#fff";
ctx.strokeRect(-width / 2, -height / 2, width, height);
ctx.stroke();
ctx.closePath();

//painting view zone
var viewFront = 200;
var glowSize = 30;
var angleTopBack = -110;
var angleBottomBack = angleTopBack * -1;
var radiusBackArc = this.width * 2;
var pTop = getPointAtDistanceAndAngle(0, 0, radiusBackArc, angleTopBack);
var pBottom = getPointAtDistanceAndAngle(0, 0, radiusBackArc, angleBottomBack);
var angleTopFront = -20;
var angleBottomFront = angleTopFront * -1;
var pTopFront = getPointAtDistanceAndAngle(pTop.x, pTop.y, viewFront, angleTopFront);
var radiusFrontArc = getDistanceBetween({
    x: 0,
    y: 0
}, pTopFront);
var pBottomFront = getPointAtDistanceAndAngle(pBottom.x, pBottom.y, viewFront, angleBottomFront);
//points for linear gradient painting of top side
var pTopRadiantEnd = getPointAtDistanceAndAngle(pTop.x, pTop.y, viewFront / 2, angleTopFront);
var pTopRadiantStart = getPointAtDistanceAndAngle(pTopRadiantEnd.x, pTopRadiantEnd.y, glowSize, 90 + angleTopFront);
//points for linear gradient painting of bottom side
var pBottomRadiantEnd = getPointAtDistanceAndAngle(pBottom.x, pBottom.y, viewFront / 2, angleBottomFront);
var pBottomRadiantStart = getPointAtDistanceAndAngle(pBottomRadiantEnd.x, pBottomRadiantEnd.y, glowSize, -90 + angleBottomFront);

//gradient definitions
var gradientTopSide = ctx.createLinearGradient(pTopRadiantStart.x, pTopRadiantStart.y, pTopRadiantEnd.x, pTopRadiantEnd.y);
gradientTopSide.addColorStop(0,...