JSFiddle - React, Tailwind, and code Playground

by Akshay U

HTML

<div id="doughnut">

</div>

CSS

*{
	margin:0;
	padding:0;
}
.container{
	text-align:center;
	padding:20px 10px;
}
#doughnut{
	width:400px;
	height:400px;
	display:inline-block;
}

JavaScript

var data = [{
    fill:15,
    color:"#80e080"
},{
    fill:35,
    color:"#4fc3f7"
},{
    fill:20,
    color:"#9575cd"
},{
    fill:30,
    color:"#f06292"
}]
var doughnut = document.querySelector("#doughnut"),
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
filled = 0;
svg.setAttribute("width","100%");
svg.setAttribute("height","100%");
svg.setAttribute("viewBox","0 0 100 100");
doughnut.appendChild(svg);
data.forEach(function(o,i){
	var circle = document.createElementNS("http://www.w3.org/2000/svg","circle"),
	startAngle = -90,
	radius = 30,
	cx = 50,
	cy = 50,
	strokeWidth = 15,
	dashArray = 2*Math.PI*radius,
	dashOffset = dashArray - (dashArray * o.fill / 100),
	angle = (filled * 360 / 100) + startAngle;
	circle.setAttribute("r",radius);
	circle.setAttribute("cx",cx);
	circle.setAttribute("cy",cy);
	circle.setAttribute("fill","transparent");
	circle.setAttribute("stroke",o.color);
	circle.setAttribute("stroke-width",strokeWidth);
	circle.setAttribute("stroke-dasharray",dashArray);
	circle.setAttribute("stroke-dashoffset",dashOffset);
	circle.setAttribute("transform","rotate("+(angle)+" "+cx+" "+cy+")");
	svg.appendChild(circle);
	filled+= o.fill;
})