d3js semi-pie chart with a seamless wiggle rainbow color pattern

I am experimenting with different styles for charts – and I am wondering how to create these kind of pattern textures charts for the different segments with rounded gapped edges.

enter image description here

my current build — regular arc

I’ve seen this example in making a pattern – how would you make this wiggly multi-colored pattern that covers the arcs – almost like its cut out and there is this pattern behind it

https://codesandbox.io/p/sandbox/magical-wiles-forked-hdpq79

import React from "react";
import * as d3 from "d3";
import "./SemiPieChart1.scss";

class SemiPieChart extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {
      data: [],
      theme: this.props.theme
        ? this.props.theme
        : ["#bde0fe", "#2698f9", "#71bcfd", "#f1f8fe"],
    };
  }

  componentDidMount() {
    var $this = this.myRef.current;

    d3.select($this).selectAll("svg").remove();

    const data = this.props.data;

    const width = parseInt(this.props.width, 10),
      height = parseInt(this.props.height, 10),
      radius = parseInt(this.props.r, 10),
      innerradius = parseInt(this.props.ir, 10);

    var color = d3.scaleOrdinal().range(this.state.theme);

    var arc = d3.arc().outerRadius(radius).innerRadius(innerradius);

    data.forEach(function (d) {
      d.total = +d.value;
    });

    var pie = d3
      .pie()
      .startAngle(-90 * (Math.PI / 180))
      .endAngle(90 * (Math.PI / 180))
      .padAngle(0.02) // some space between slices
      .sort(null)
      .value(function (d) {
        return d.total;
      });

    var svg = d3
      .select($this)
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("class", "piechart")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var segments = svg.append("g").attr("class", "segments");

    var slices = segments
      .selectAll(".arc")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arc");

    slices
      .append("path")
      .attr("d", arc)
      .attr("fill", function (d, i) {
        return color(i);
      })
      .transition()
      .attrTween("d", function (d) {
        var i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
        return function (t) {
          d.endAngle = i(t);
          return arc(d);
        };
      });
  }

  render() {
    return <div ref={this.myRef} className="SemiPieChart" />;
  }
}
export default SemiPieChart;


<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="hook"></div>
<script type="text/javascript">
        // SVG injection:
var svg = d3.select("#hook").append("svg").attr("id", "d3svg")
    .attr("width", 120)
    .attr("height", 120);
//Pattern injection
var defs = svg.append("defs")
var pattern = defs.append("pattern")
        .attr({ id:"hash4_4", width:"8", height:"8", patternUnits:"userSpaceOnUse", patternTransform:"rotate(-45)"})
    .append("rect")
        .attr({ width:"4", height:"8", transform:"translate(0,0)", fill:"#88AAEE" });

//Shape design
svg.append("g").attr("id","shape")
    .append("circle")
.attr({cx:"60",cy:"60",r:"50", fill:"url(#hash4_4)" })
    </script>
</body>
</html>