표면 연속성(G0/G1/G2)

<div class="sc-wrap">
  <div class="sc-panel">
    <svg viewBox="0 0 100 70" class="sc-svg">
      <path class="sc-curve" d="M6,50 C30,50 40,20 50,20"/>
      <path class="sc-curve" d="M50,20 C60,20 72,55 94,55"/>
      <g class="sc-comb sc-jump"></g>
    </svg>
    <span class="sc-cap">G0 — kink</span>
  </div>
  <div class="sc-panel">
    <svg viewBox="0 0 100 70" class="sc-svg">
      <path class="sc-curve" d="M6,50 C30,50 42,22 50,22"/>
      <path class="sc-curve" d="M50,22 C58,22 72,52 94,52"/>
      <g class="sc-comb sc-step"></g>
    </svg>
    <span class="sc-cap">G1 — comb steps</span>
  </div>
  <div class="sc-panel">
    <svg viewBox="0 0 100 70" class="sc-svg">
      <path class="sc-curve sc-smooth" d="M6,50 C30,50 34,22 50,22 C66,22 70,50 94,50"/>
      <g class="sc-comb sc-flow"></g>
    </svg>
    <span class="sc-cap">G2 — comb flows</span>
  </div>
</div>

.sc-wrap{display:flex;gap:clamp(6px,3vmin,18px);align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,14px)}
.sc-panel{flex:1;max-width:190px;text-align:center}
.sc-svg{width:100%;height:auto}
.sc-curve{fill:none;stroke:var(--fg);stroke-width:1.6}
.sc-smooth{stroke:var(--accent-3)}
.sc-comb line{stroke:var(--accent-2);stroke-width:.8}
.sc-cap{display:block;margin-top:.5em;font-size:clamp(8px,2.2vmin,11px);color:var(--muted)}

function buildComb(el, ticks) {
  el.innerHTML = ticks.map(([x, y, len, ang]) => {
    const rad = ang * Math.PI / 180;
    const dx = Math.cos(rad) * len, dy = Math.sin(rad) * len;
    return `<line x1="${x}" y1="${y}" x2="${x + dx}" y2="${y + dy}"/>`;
  }).join('');
}
const jump = [];
for (let i = 0; i <= 6; i++) jump.push([10 + i * 6, 42, 3 + i * 0.4, -70]);
for (let i = 0; i <= 6; i++) jump.push([54 + i * 6, 35 - i, 9 - i * 1.1, 120]);
buildComb(document.querySelector('.sc-jump'), jump);
const step = [];
for (let i = 0; i <= 6; i++) step.push([10 + i * 6, 42 - i * 0.5, 2 + i * 0.5, -80]);
for (let i = 0; i <= 6; i++) step.push([54 + i * 6, 34 - i * 0.3, 7 - i * 0.8, 100]);
buildComb(document.querySelector('.sc-step'), step);
const flow = [];
for (let i = 0; i <= 13; i++) {
  const x = 10 + i * 6;
  const len = 2 + 5 * Math.sin((i / 13) * Math.PI);
  flow.push([x, 42 - i * 1.1, len, -80 + i * 12]);
}
buildComb(document.querySelector('.sc-flow'), flow);