SOURCE

    function getValueWithDeg(n) {
        return n * Math.PI / 180;
    }

    function getDegWithValue(n) {
        return n * 180 / Math.PI;
    }

    class pie {
        constructor() {
            this.svg = document.getElementById("svg1");
            this.cx = 150;//圆心 半径
            this.cy = 150;
            this.r = 100;
        }

        getPath(r, start, end) {
            let
                x1 = this.cx + Math.sin(getValueWithDeg(start)) * r,
                y1 = this.cy - Math.cos(getValueWithDeg(start)) * r,
                x2 = this.cx + Math.sin(getValueWithDeg(end)) * r,
                y2 = this.cy - Math.cos(getValueWithDeg(end)) * r;

            return `
                    M ${this.cx} ${this.cy}
                    L ${x1} ${y1}
                    A ${r} ${r} 0 ${end - start > 180 ? 1 : 0} 1 ${x2} ${y2}
                    Z
                `;

        }

        lineWithDeg(start, end, color = "black") {
            let that = this;
            let pathA = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            pathA.style.stroke = 'none';
            pathA.style.fill = color;
            pathA.setAttribute('d', this.getPath(this.r, start, end, color));
            pathA.onmouseover = function () {
                let add = 30, speed = 1, addStart = 0;
                requestAnimationFrame(function _setPath() {
                    pathA.setAttribute('d', that.getPath(that.r + addStart, start, end, color));
                    addStart = addStart + speed;
                    addStart < add && requestAnimationFrame(_setPath);
                });
            };
            pathA.onmouseout = function () {
                let add = 0, speed = 1, addStart = 30;
                requestAnimationFrame(function _setPath() {
                    pathA.setAttribute('d', that.getPath(that.r + addStart, start, end, color));
                    addStart = addStart - speed;
                    addStart > add && requestAnimationFrame(_setPath);
                });
            };
            this.svg.appendChild(pathA);
        }

    }

    let pie1 = new pie();
    let data = [300, 200, 800, 500, 200];
    let colors = ['#53ebff', '#ff98e6', '#ff54c7', '#8effc5', '#bb90ff'];
    let sum = data.reduce((tmp, item) => tmp + item);
    let now = 0;
    data.forEach((item, index) => {
        let ang = 360 * item / sum;
        pie1.lineWithDeg(now, now + ang, colors[index]);
        now += ang;
    });

<svg width="300" height="300" id="svg1" style="border:1px solid lightblue"></svg>