JSFiddle - React, Tailwind, and code Playground

by El4a

HTML

<script src="http://piotr.zalewa.info/downloads/raphael.js"></script>
<div id="holder">
 
</div>

CSS

@font-face {
      font-family: "Fontin-Sans";
      src: url(fontin-sans.otf) format("opentype");
}


body {
    background: white;
    color: #fff;
    font: 300 100.1% Fontin-Sans, "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}

#copy a {
    color: #fff;
}
#holder {
    margin: -350px 0 0 -350px;
    width: 700px;
    height: 700px;
}

path {stroke:none}
circle {stroke:none}

JavaScript

Raphael.fn.pieChart = function (cx, cy, r, values, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var bcolors = ['#d667cd','#3D8C1E','#00b9ff'];
    var colors = ['FF5DF4','#69F233', '#0080B0'];
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
               // color = "hsb(" + start + ", 1, .5)",
                color = colors[j%colors.length],
                ms = 500,
                delta = 30,
                //bcolor = "hsb(" + start + ", 1, 1)",
                bcolor = bcolors[j%bcolors.length],
                p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "100-" + bcolor + "-" + color}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad));
            
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (var i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

Raphael.fn.circle = function(cx, cy, r){
     var paper = this,
     rad = Math.PI / 180,
     chart = this.set();
    
    var circle = paper.circle(280, 180, 175);
    circle.attr("fill", "white");
    circle.attr("stroke", "#fff");
    
    return chart;
};

(function (raphael) {
   ...