선버스트

<div class="viz">
  <svg id="svg"></svg>
</div>

:root{--viz-4:#e8a23a}
body{display:block}
.viz{position:relative;width:100%;height:100%}
svg{display:block;width:100%;height:100%;overflow:visible}

var svg = document.getElementById('svg');
var NS = 'http://www.w3.org/2000/svg';
function se(t){ return document.createElementNS(NS,t); }
function sa(e,o){ for (var k in o) e.setAttribute(k,o[k]); }
function R(a,b){ return a + Math.random()*(b-a); }
function sum(arr){ return arr.reduce(function(a,b){ return a+b; },0); }

var ROOTS = [
  { color: 'var(--accent)' },
  { color: 'var(--viz-4)' },
  { color: 'var(--accent-3)' }
];
var LEAF_ROOT = [0,0,1,1,1,2,2];
var cur = LEAF_ROOT.map(function(){ return 20; });
var W=300, H=200;

function measure(){
  var r = svg.getBoundingClientRect();
  W = Math.max(r.width,10); H = Math.max(r.height,10);
  sa(svg,{ viewBox: '0 0 ' + W + ' ' + H });
}

function arcPath(cx,cy,r0,r1,a0,a1){
  var x0o=cx+Math.cos(a0)*r1, y0o=cy+Math.sin(a0)*r1;
  var x1o=cx+Math.cos(a1)*r1, y1o=cy+Math.sin(a1)*r1;
  var x1i=cx+Math.cos(a1)*r0, y1i=cy+Math.sin(a1)*r0;
  var x0i=cx+Math.cos(a0)*r0, y0i=cy+Math.sin(a0)*r0;
  var large = (a1-a0) > Math.PI ? 1 : 0;
  return 'M'+x0o+','+y0o+' A'+r1+','+r1+' 0 '+large+' 1 '+x1o+','+y1o+' L'+x1i+','+y1i+' A'+r0+','+r0+' 0 '+large+' 0 '+x0i+','+y0i+' Z';
}

function draw(){
  svg.innerHTML = '';
  var cx=W/2, cy=H/2;
  var rMax = Math.max(30, Math.min(W,H)/2 - 8);
  var r0=rMax*0.26, r1=rMax*0.58, r2=rMax*0.98;
  var grand = sum(cur);
  var ga = 0.03;
  var a = -Math.PI/2;
  ROOTS.forEach(function(root,ri){
    var rootTotal = 0;
    cur.forEach(function(v,li){ if (LEAF_ROOT[li]===ri) rootTotal += v; });
    var a1 = a + (rootTotal/grand)*Math.PI*2;
    var s0=a+ga, s1=Math.max(s0,a1-ga);
    var p1 = se('path');
    sa(p1,{ d: arcPath(cx,cy,r0,r1,s0,s1), fill: root.color });
    svg.appendChild(p1);
    var la = a, idx = 0;
    cur.forEach(function(v,li){
      if (LEAF_ROOT[li]!==ri) return;
      var la1 = la + (v/rootTotal)*(a1-a);
      var lg = ga*0.5;
      var ls0=la+lg, ls1=Math.max(ls0,la1-lg);
      var p2 = se('path');
      sa(p2,{ d: arcPath(cx,cy,r1,r2,ls0,ls1), fill: root.color, 'fill-opacity': idx%2===0?1:0.55 });
      svg.appendChild(p2);
      la = la1; idx++;
    });
    a = a1;
  });
  var fs = Math.max(10, Math.min(18, rMax/5));
  var ct = se('text');
  sa(ct,{ x:cx, y:cy-1, 'text-anchor':'middle', fill:'var(--fg)', 'font-size':fs, 'font-weight':800 });
  ct.textContent = Math.round(grand);
  svg.appendChild(ct);
  var cl = se('text');
  sa(cl,{ x:cx, y:cy+fs*0.85, 'text-anchor':'middle', fill:'var(--muted)', 'font-size':fs*0.42, 'font-weight':700 });
  cl.textContent = 'TOTAL';
  svg.appendChild(cl);
}

function animate(target){
  var from = cur.slice();
  var t0 = performance.now();
  function step(t){
    var p = Math.min(1,(t-t0)/700);
    var e = 1-Math.pow(1-p,3);
    cur = from.map(function(v,i){ return v+(target[i]-v)*e; });
    draw();
    if (p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

new ResizeObserver(function(){ measure(); draw(); }).observe(svg);
measure();
draw();
animate(LEAF_ROOT.map(function(){ return R(8,45); }));
setInterval(function(){
  animate(LEAF_ROOT.map(function(){ return R(6,48); }));
}, 3600);