Как написать анимацию для круговой диаграммы canvas?

Question

fateseekers @fateseekers

Как написать анимацию для круговой диаграммы canvas?

Хочу реализовать круговую диаграмму с анимацией раскрытия.
С самой диаграммой проблем не возникло, а вот с анимацией большие проблемы, собственно, может кто помочь с этим.
Все сделано на чистом JS.

(function () {
    let canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        data = [
            {
                data: "STR",
                count: 2
            },
            {
                data: "STR",
                count: 9
            },
            {
                data: "STR",
                count: 3
            },
            {
                data: "STR",
                count: 6
            },
            {
                data: "STR",
                count: 6
            },
        ],
        config = {
            radius: 100,
        };

    class Circle {
        constructor(data) {
            this.cx = w / 2;
            this.cy = h / 2;
            this.radius = data.radius || config.radius;
            this.startAngle = data.startAngle;
            this.endAngle = data.endAngle;
            this.fill = data.fill || false;
            this.stroke = data.stroke || false;
            this.fillColor = data.fillColor || "black";
            this.strokeColor = data.strokeColor || "white";
            this.reverse = data.reverse || false
        }
        drawPart(){
            if(this.fillColor){
                ctx.fillStyle = this.fillColor
            }
            if(this.strokeColor){
                ctx.strokeStyle = this.strokeColor
            }
            ctx.beginPath();
            ctx.moveTo(this.cx, this.cy);
            ctx.arc(this.cx, this.cy, this.radius, this.startAngle, this.endAngle, this.reverse);
            ctx.lineTo(this.cx, this.cy);
            ctx.closePath();
            if(this.fill){
                ctx.fill()
            }
            if(this.stroke) {
                ctx.lineWidth = 5
                ctx.stroke();
            }
        }
    }

    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;

        init();
    }

    resizeCanvas();

    function init() {
        let maxCount = data.reduce ((a, b, index) => {
                if (index === 1) {
                    return a.count + b.count
                }
                return a + b.count
            }),
            startAngle = - Math.PI / 2;

        for (let i = 0; i < data.length; i++){
            let endAngle = ((data[i].count / maxCount) * Math.PI) * 2 + startAngle,
                circle = new Circle ({
                    startAngle: startAngle,
                    endAngle: endAngle,
                    fill: true,
                    stroke: true
                });
            circle.drawPart();
            startAngle = endAngle
        }
    }
}());

Пример: вот