모노스페이스

<div class="stage">
  <div class="row">
    <div class="txtwrap mono">
      <div class="grid" id="gridA"></div>
      <span class="txt">design_01();</span>
    </div>
    <div class="cap">ui-monospace</div>
  </div>
  <div class="row">
    <div class="txtwrap prop">
      <div class="grid" id="gridB"></div>
      <span class="txt">design_01();</span>
    </div>
    <div class="cap">system-ui (비례폭)</div>
  </div>
</div>

.stage{display:grid;gap:14px;justify-items:center}
.row{display:grid;gap:6px;justify-items:center}
.txtwrap{position:relative;display:inline-block}
.txtwrap .txt{display:block;font-size:clamp(15px,5.5vmin,24px);letter-spacing:0;white-space:pre;color:var(--fg);position:relative;z-index:1}
.mono .txt{font-family:ui-monospace,Menlo,'SFMono-Regular',monospace}
.prop .txt{font-family:system-ui,-apple-system,sans-serif}
.grid{position:absolute;inset:-2px 0;z-index:0;animation:pulse 2.4s ease-in-out infinite}
.cap{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.8}}

const gridA = document.getElementById('gridA');
const gridB = document.getElementById('gridB');
const monoTxt = document.querySelector('.mono .txt');
function setup(){
  const cs = getComputedStyle(monoTxt);
  const c = document.createElement('canvas').getContext('2d');
  c.font = cs.fontWeight + ' ' + cs.fontSize + ' ' + cs.fontFamily;
  const w = Math.max(c.measureText('0').width, 4);
  const bg = 'repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px ' + w + 'px)';
  gridA.style.backgroundImage = bg;
  gridB.style.backgroundImage = bg;
}
setup();
addEventListener('resize', setup);