JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='main' width=170 height=225></canvas>

CSS

body{
    background: #147FC7;
    margin: 0;
}

canvas{
    background: #08212d;
    border-radius: 10px;
    margin: 50px;
}

JavaScript

let ctx = document.getElementById('main').getContext('2d');

ctx.translate(170/2, 225/2);

ctx.strokeStyle = '#eda8ca';
const steps = 12;
for(let i=0; i<steps; i++) {
    ctx.save();
    ctx.rotate(i/steps*Math.PI*2);
    ctx.translate(55, 0);
    
    const r = 7;
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(0, r);
    ctx.lineTo(-r, 0);
    ctx.lineTo(0, -r);
    ctx.closePath();
    ctx.stroke();
	
    ctx.restore();
}

ctx.strokeStyle = '#eeeeee';
for(let i=0; i<steps; i++) {
    ctx.save();
    ctx.rotate((i + 0.5)/steps*Math.PI*2);
    ctx.translate(75, 0);
    
    const r = 7;
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(0, r);
    ctx.lineTo(-r, 0);
    ctx.lineTo(0, -r);
    ctx.closePath();
    ctx.stroke();
	
    ctx.restore();
}

ctx.strokeStyle = '#eda8ca';
ctx.beginPath();
ctx.arc(0, 0, 40, 0, Math.PI*2);
ctx.stroke();

for(let i=0; i<2; i++) {
	ctx.rotate(Math.PI);
    
    ctx.save();
    ctx.translate(50, -75);
    ctx.beginPath();
    ctx.arc(0, 0, 20, 0, Math.PI*2);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(10, 17, 10, 0, Math.PI*2);
    ctx.stroke();
    ctx.restore();
    
    ctx.beginPath()
    ctx.lineTo(33, 23);
    ctx.lineTo(50, 75);
    ctx.lineTo(24, 83);
    ctx.lineTo(12, 93);
    ctx.lineTo(9,  79);
    ctx.lineTo(24, 83);
    ctx.stroke();
}