음성 모드 오브

<div class="stage">
  <svg viewBox="0 0 200 200" width="150" height="150">
    <defs>
      <radialGradient id="og" cx="42%" cy="38%" r="70%">
        <stop offset="0%" stop-color="#8f8fff"/>
        <stop offset="60%" stop-color="#5b5bf7"/>
        <stop offset="100%" stop-color="#3a3ad6"/>
      </radialGradient>
    </defs>
    <path id="blob" fill="url(#og)"/>
  </svg>
  <span class="lbl" id="lbl">듣는 중</span>
</div>

.stage{display:grid;place-items:center;gap:10px}
.lbl{font-size:11px;color:var(--muted);letter-spacing:.02em}

const blob = document.getElementById('blob'), lbl = document.getElementById('lbl');
const N = 10;
let t = 0, mode = 'listen';
const modes = { listen: { amp: 6, speed: .035 }, think: { amp: 3, speed: .02 }, speak: { amp: 14, speed: .07 } };
function path(amp) {
  const pts = [];
  for (let i = 0; i < N; i++) {
    const a = (i / N) * Math.PI * 2;
    const n = Math.sin(a * 3 + t) * amp + Math.sin(a * 5 - t * 1.7) * amp * 0.4;
    const r = 70 + n;
    pts.push([100 + Math.cos(a) * r, 100 + Math.sin(a) * r]);
  }
  let d = 'M ' + pts[0][0] + ' ' + pts[0][1] + ' ';
  for (let i = 0; i < N; i++) {
    const [cx, cy] = pts[i];
    const [nx, ny] = pts[(i + 1) % N];
    d += 'Q ' + cx + ' ' + cy + ' ' + (cx + nx) / 2 + ' ' + (cy + ny) / 2 + ' ';
  }
  return d + 'Z';
}
function frame() {
  const m = modes[mode];
  t += m.speed;
  blob.setAttribute('d', path(m.amp));
  requestAnimationFrame(frame);
}
frame();
const order = ['listen', 'think', 'speak'];
const labels = { listen: '듣는 중', think: '생각하는 중', speak: '말하는 중' };
let idx = 0;
setInterval(() => { idx = (idx + 1) % order.length; mode = order[idx]; lbl.textContent = labels[mode]; }, 1800);