JSFiddle - React, Tailwind, and code Playground

by breizo

HTML

<!DOCTYPE html>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

JavaScript

var width = 400,
        height = 400,
        τ = 2 * Math.PI;
    var arc = d3.svg.arc()
        .innerRadius(90)
        .outerRadius(150);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

    // Add the background arc, from 0 to 100% (τ).
    var background = svg.append("path")
        .datum({
        endAngle: τ,
        startAngle: 0
    })
        .style("fill", "#ddd")
        .attr("d", arc);

    // Add the foreground arc in orange, currently showing 12.7%.
    var foreground = svg.append("path")
        .datum({
        endAngle: .127 * τ,
        startAngle: -.127 * τ
    })
        .style("fill", "orange")
        .attr("d", arc);

    setInterval(function () {
        foreground.transition()
            .duration(750)
            .call(arcTween, Math.random() * τ, Math.random() * τ);
    }, 1500);

    function arcTween(transition, newStartAngle, newFinishAngle) {

        transition.attrTween("d", function (d) {
            var interpolateStart = d3.interpolate(d.startAngle, newStartAngle);
            var interpolateEnd = d3.interpolate(d.endAngle, newFinishAngle);
            return function (t) {
                d.startAngle = interpolateStart(t);
                d.endAngle = interpolateEnd(t);
                return arc(d);
            };
        });
    }