JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<canvas id='rating_circle' width='400px' height='150px'></canvas>

CSS

body {
    background: #000;
}

JavaScript

var canvas = document.getElementById('rating_circle');
var context = canvas.getContext('2d');
var radius = 27.5;
var degrees = 0;
var degrees2 = 0;
var degrees3 = 0;
var degrees4 = 0;

var to1 = 280;
var to2 = 190;
var to3 = 100;
var to4 = 300;
var animation_loop, animation_loop1, animation_loop2, animation_loop3;

function init() {
    context.beginPath();
    context.arc(33, 33, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = '#4f300f';
    context.stroke();
    
    context.beginPath();
    context.arc(127, 33, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = '#2e4016';
    context.stroke();
    
    context.beginPath();
    context.arc(224, 33, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = '#003731';
    context.stroke()
 
    var radians = degrees * Math.PI / 180;
    context.beginPath();
	context.strokeStyle = '#d78328';
	context.lineWidth = 7;
	context.arc(33, 33, radius, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 		
	context.stroke();
    
    var radians = degrees2 * Math.PI / 180;
    context.beginPath();
	context.strokeStyle = '#7dad3b';
	context.lineWidth = 7;
	context.arc(127, 33, radius, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 		
	context.stroke();
    
    var radians = degrees3 * Math.PI / 180;
    context.beginPath();
	context.strokeStyle = '#009486';
	context.lineWidth = 7;
	context.arc(224, 33, radius, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 		
	context.stroke();
    
    
    context.beginPath();
    context.arc(339, 33, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = '#5e5e5e';
    context.stroke();
    
    var radians = degrees4 * Math.PI / 180;
    context.beginPath();
	context.strokeStyle = '#ffffff';
	context.lineWidth = 7;
	context.arc(339, 33, radius, 0 - 90*Math.PI/180,...