JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="chart">
    <defs>
        <pattern id="stripe" patternUnits="userSpaceOnUse" width="40" height="20">
            <line x1="10" y1="0" x2="30" y2="20" />
            <line x1="-10" y1="0" x2="10" y2="20" />
            <line x1="30" y1="0" x2="50" y2="20" />
        </pattern>
        <mask id="mask">
            <rect style="fill: url(#stripe)" />
        </mask>
    </defs>
</svg>

CSS

#stripe line {
          fill: white;
          stroke: white;
          stroke-linecap: square;
          stroke-linejoin: miter;
          stroke-width: 10px;
      }

JavaScript

var w = 400;
var h = 400;
var r = h / 2;
var color = d3.scale.category10();

var data = [{
    "label": "a",
    "value": 20,
    "color": "#2CA02C"
}, {
    "label": "b",
    "value": 50,
    "color": "#1f77b4"
}, {
    "label": "c",
    "value": 30,
    "color": "#FF7F0E"
}];

var vis = d3.select('#chart').attr("width", w).attr("height", h).append("svg:g").data([data]).attr("transform", "translate(" + r + "," + r + ")");

// Define attributes for the mask rect
d3.select("#mask").select("rect")
    .attr("height", h)
    .attr("width", w)
    .attr("transform", "translate(-" + r + ",-" + r + ")");

var pie = d3.layout.pie().value(function (d) {
    return d.value;
});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice")
    .data(pie).enter()
    .append("svg:g")
    .attr("class", "slice")
    // Add the pattern
    // Add the mask
    .attr("style", "mask:url(#mask);");

arcs.append("svg:path")
    .attr("fill", function (d) {
        return d.data.color;
    })
    .attr("d", function (d) {
        return arc(d);
    });