Design Atlas
한국어
⚙ Product & industrial design

Surface continuity (G0/G1/G2)

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

A grading of how smoothly two curves or surfaces meet — position-only (G0), matching tangent (G1), or matching curvature too (G2).

Also known as: Curvature continuityClass-A surface커브 연속성
···
html
<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>
css
.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)}
js
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);

"The two curves join smoothly" actually splits into three grades. G0 (positional continuity) just needs the endpoints to touch — the directions can be completely different, leaving a visible kink. G1 (tangent continuity) matches the direction the two curves are heading at the joint, so there's no kink, but how sharply each curve bends (its curvature) can still jump, and a reflected highlight breaks abruptly right at that point. G2 (curvature continuity) matches curvature too, so a highlight sweeping across the surface flows straight through the boundary without a break.

A curvature comb makes the difference visible — short perpendicular ticks drawn along the curve at regular intervals, their length scaled to curvature. At a G0 boundary the ticks' direction itself is mismatched; at G1 the tick length jumps abruptly; at G2 the ticks vary smoothly across the joint. Car bodies and appliance shells — products where a light reflection on the surface itself reads as quality ("Class-A surfaces") — often demand G2 or better.

Surfacing tools like Alias, Fusion 360, and Rhino visualize this with curvature combs or zebra-stripe analysis, catching a spot that looks smooth to the eye but is actually broken at G1. The same problem shows up joining easing curves in a design system: two animation segments can match speed (first derivative) at the handoff but jump in acceleration (second derivative), and the motion looks smooth on paper but reads as subtly jerky.

When to use

When modeling a surface where reflection quality matters (cars, appliances), or when a joined curve looks smooth but you're not sure.