JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder"></div>

CSS

#holder {
    display: inline-block;
    height: 360px;
    left: 83px;
    margin: -200px 0 0 -200px;
    padding: 158px 0 0 160px;
    position: relative;
    top: 147px;
    width: 360px;
}

JavaScript

window.onload = function () {
                var r = Raphael("holder");

                r.customAttributes.segment = function (x, y, r, a1, a2, color) {
                    var flag = (a2 - a1) > 180;
                    a1 = (a1 % 360) * Math.PI / 180;
                    a2 = (a2 % 360) * Math.PI / 180;
                    var segment = {
                        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
                    };
    
                    if (color) {
                        segment.fill = color;
                    }
                    return segment;
                };

                

                var data = [90, 90, 90, 90],
                    colors = ["#000","#ccc","#ddd","#eee"],
                    
                    paths = r.set(),
                    total,
                    start,
                    bg = r.circle(200, 200, 0).attr({stroke: "#fff", "stroke-width": 10});
                    
                data = data.sort(function (a, b) { return b - a;});

                total = 0;
                for (var i = 0, ii = data.length; i < ii; i++) {
                    total += data[i];
                }
                start = 0;
                for (i = 0; i < ii; i++) {
                    var val = 360 / total * data[i];
                    (function (i, val) {
                        paths.push(r.path().attr({segment: [200, 200, 1, start, start + val, colors[i]], stroke: "#fff"}).click(function () {
                            total += data[i];
                            data[i] *= 2;
                            animate();
                        }));
                    })(i, val);
                    start += val;
                }
                bg.animate({r: 151}, 1000, "<");
                animate(1000);
                
            };