JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='main' width=500 height=500></canvas>

CSS

body{
    background: #131118;
    margin: 0;
}

JavaScript

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

ctx.translate(250, 250);

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