https://wxli.ai/assets/js/radar-chart-animation.js

1(function () {
2  var CX = 150, CY = 150, PI2 = Math.PI * 2;
3  var axes = [[0,-1],[0.951,-0.309],[0.588,0.809],[-0.588,0.809],[-0.951,-0.309]];
4  var layers = [
5    { id: 'radarWxli', dots: ['radarDot0','radarDot1','radarDot2','radarDot3','radarDot4'],
6      r: [105.8, 103.5, 101.4, 101.4, 103.5], amp: 11,
7      osc: [[0.43,0.00,0.71,1.20,0.40],[0.37,2.10,0.61,0.50,0.45],[0.53,4.30,0.83,2.80,0.35],[0.41,1.70,0.67,3.50,0.42],[0.47,3.20,0.73,0.90,0.38]] },
8    { id: 'radarStream', dots: null,
9      r: [76, 89, 92, 75, 91], amp: 4,
10      osc: [[0.51,0.90,0.79,2.30,0.35],[0.39,3.10,0.63,1.10,0.40],[0.57,1.50,0.91,0.70,0.30],[0.45,2.80,0.69,4.10,0.38],[0.33,0.30,0.55,2.60,0.45]] },
11    { id: 'radarRadio', dots: null,
12      r: [74, 85, 88, 72, 84], amp: 4,
13      osc: [[0.59,1.30,0.97,0.40,0.35],[0.43,0.70,0.71,2.90,0.40],[0.37,3.70,0.61,1.60,0.42],[0.53,2.20,0.89,0.20,0.35],[0.47,4.80,0.73,3.30,0.38]] }
14  ];
15  layers = layers.map(function (l) {
16    return { el: document.getElementById(l.id),
17      dots: l.dots ? l.dots.map(function (id) { return document.getElementById(id); }) : null,
18      r: l.r, amp: l.amp, osc: l.osc };
19  });
20  function frame() {
21    var t = Date.now() / 1000;
22    layers.forEach(function (l) {
23      var pts = axes.map(function (a, i) {
24        var o = l.osc[i];
25        var n = l.amp * ((1 - o[4]) * Math.sin(PI2 * o[0] * t + o[1]) + o[4] * Math.sin(PI2 * o[2] * t + o[3]));
26        var r = l.r[i] + n;
27        return [CX + r * a[0], CY + r * a[1]];
28      });
29      l.el.setAttribute('points', pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' '));
30      if (l.dots) pts.forEach(function (p, i) { l.dots[i].setAttribute('cx', p[0].toFixed(1)); l.dots[i].setAttribute('cy', p[1].toFixed(1)); });
31    });
32    requestAnimationFrame(frame);
33  }
34  requestAnimationFrame(frame);
35}());