index.html

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <title>Page Title</title>
    <style>
        circle {
            fill: steelblue;
            stroke: #fff;
            stroke-width: 3px;
        }

        path {
            fill: none;
            stroke: #000;
            stroke-width: 1px;
        }
    </style>


</head>


<body>
    <div id='arrows' style="width:30px;"></div>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="dist/d3-cyclicarrow.js"></script>
    <script>

        // Create dummy data
        var data = ["first", "second", "third", "fourth", "fifth"];

        // set the color scale
        var color = d3.scaleOrdinal(d3.schemeCategory10);


        var arr = d3.cyclicarrow()(data);

        d3.svg('path.svg').then(function (svg) {
            svgnode = document.importNode(svg.documentElement, true);
            d3.select("div#arrows").node().append(svgnode);
            svg = d3.select("div#arrows svg");


            svg.selectAll("whatever")
                .data(arr)
                .enter()
                .append('path')
                .attr('d', d3.arrowonpath())
                .style('fill', function (d) { return (color(d.index)) })
                .style("stroke", "black")
                .style("stroke-width", "1")
                .style("opacity", 1);

        });


    </script>

</body>