옵티컬 보정

<div class="wrap">
  <div class="row">
    <svg viewBox="0 0 24 24" width="30%"><rect x="3" y="3" width="18" height="18" rx="2" fill="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" width="30%"><circle id="ci" cx="12" cy="12" r="9" fill="var(--fg)"/></svg>
  </div>
  <div class="label" id="lbl">same math size — circle looks smaller</div>
</div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.row{display:flex;gap:clamp(16px,6vmin,40px);align-items:center}
#ci{transform-box:fill-box;transform-origin:center;transition:transform .5s ease}
.label{font-size:11px;color:var(--muted);text-align:center;max-width:85%;line-height:1.5}

const ci = document.getElementById('ci');
const lbl = document.getElementById('lbl');
let corrected = false;
function paint() {
  ci.style.transform = corrected ? 'scale(1.09)' : 'scale(1)';
  lbl.textContent = corrected ? 'optically corrected \u2014 circle overshoots ~9%' : 'same math size \u2014 circle looks smaller';
}
paint();
setInterval(() => { corrected = !corrected; paint(); }, 1600);