인체공학

<div class="erg-wrap">
  <svg viewBox="0 0 220 120" class="erg-svg">
    <ellipse class="erg-handle" cx="70" cy="60" rx="14" ry="34"/>
    <path class="erg-hand erg-hand-small" d="M40,60 q6,-30 30,-32 q10,-2 12,8 q2,10 -4,14 q10,0 14,10 q3,9 -4,14 q8,2 9,12 q1,10 -9,12 q4,8 -4,13 q-14,7 -30,-4 q-16,-11 -14,-47 Z"/>
    <path class="erg-hand erg-hand-big" d="M36,58 q6,-38 34,-40 q12,-2 14,10 q2,12 -5,17 q12,0 17,12 q4,11 -5,17 q10,2 11,15 q1,12 -11,15 q5,10 -5,16 q-16,9 -35,-5 q-19,-14 -15,-57 Z"/>
    <text class="erg-cap" x="70" y="112" text-anchor="middle">5th – 95th percentile</text>
    <line class="erg-dim" x1="130" y1="30" x2="130" y2="90"/>
    <line class="erg-tick" x1="124" y1="30" x2="136" y2="30"/>
    <line class="erg-tick" x1="124" y1="90" x2="136" y2="90"/>
    <text class="erg-num" x="142" y="63">⌀32</text>
  </svg>
</div>

.erg-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,16px)}
.erg-svg{width:min(94%,440px);height:auto;display:block}
.erg-handle{fill:var(--surface);stroke:var(--fg);stroke-width:1.4}
.erg-hand{fill:var(--accent);stroke:var(--fg);stroke-width:1;stroke-linejoin:round}
.erg-hand-small{fill-opacity:.55;animation:erg-cycle 3.2s ease-in-out infinite}
.erg-hand-big{fill-opacity:0;stroke-opacity:.6;animation:erg-cycle-rev 3.2s ease-in-out infinite}
.erg-cap{font-size:8px;fill:var(--muted)}
.erg-dim,.erg-tick{stroke:var(--muted);stroke-width:.8}
.erg-num{font-size:9px;fill:var(--muted)}
@keyframes erg-cycle{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes erg-cycle-rev{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}