JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var r = Raphael("holder", 600, 600);

// Custom Attribute
r.customAttributes.arc = function (value, total, R, color)
{
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 - R * Math.sin(a),
        path;
    if (total == value)
    {
        path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]];
    }
    else
    {
        path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
    }
    return {path: path, stroke: color,"stroke-width": 10};
};

r.circle(300,300,220).attr({"fill" : "#fff", "stroke-width" : 5, "stroke" : "#003e68"}); //outer circle
r.path().attr({arc: [75, 100, 200, '#8bc53e']}); //#1
r.path().attr({arc: [66, 100, 180, '#ec3c95']}); //#2
r.path().attr({arc: [50, 100, 160, '#00a49f']}); //#3
r.path().attr({arc: [33, 100, 140, '#ffcd01']}); //#4 (your vote)
r.circle(300,300,120).attr({"fill" : "#ee3d96", "stroke-width" : 5, "stroke" : "#003e68"}); //inner circle
r.text(300, 280, "100").attr({'fill' : '#fff', 'font-size' : 60, 'font-family' : 'graphikbold'}); //vote count
r.text(300, 320, "VOTES").attr({'fill' : '#fff', 'font-size' : 30, 'font-family' : 'graphikbold'}); //vote count