Earcon

<div class="wrap">
  <div class="icon" id="icon">
    <svg viewBox="0 0 24 24" width="46%" height="46%"><path d="M5 13l4 4L19 7" fill="none" stroke="var(--accent-3)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
  </div>
  <div class="notes" id="notes"><span></span><span></span><span></span></div>
  <button class="play" id="play" type="button" aria-label="play sound"><span class="tri"></span></button>
</div>

.wrap{position:relative;width:94%;height:88%}
.icon{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent-3);opacity:0;animation:ring 2.4s ease-out infinite}
.r2{animation-delay:.5s}.r3{animation-delay:1s}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.1);opacity:0}}
.notes{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:flex;gap:10px}
.notes span{width:8px;height:8px;border-radius:50%;background:var(--line);animation:pop 2.4s ease-in-out infinite}
.notes span:nth-child(2){animation-delay:.15s}.notes span:nth-child(3){animation-delay:.3s}
@keyframes pop{0%,20%{background:var(--line);transform:translateY(0)}30%{background:var(--accent);transform:translateY(-6px)}45%,100%{background:var(--line);transform:translateY(0)}}
.play{position:absolute;right:0;bottom:0;width:clamp(28px,15%,40px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.play .tri{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--fg);margin-left:2px}
.play:active{transform:scale(.92)}

const btn = document.getElementById('play');
const noteEls = document.querySelectorAll('#notes span');
btn.addEventListener('click', () => {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const freqs = [523.25, 659.25, 783.99];
  const now = ctx.currentTime;
  freqs.forEach((f, i) => {
    const t = now + i * 0.14;
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'sine';
    osc.frequency.value = f;
    gain.gain.setValueAtTime(0, t);
    gain.gain.linearRampToValueAtTime(0.13, t + 0.015);
    gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.16);
    osc.connect(gain).connect(ctx.destination);
    osc.start(t);
    osc.stop(t + 0.18);
    setTimeout(() => { noteEls[i].style.background = 'var(--accent)'; setTimeout(() => { noteEls[i].style.background = ''; }, 160); }, i * 140);
  });
  setTimeout(() => ctx.close(), 600);
});