offset cusps

acute corner에서 parallel offset은 cusp(self-intersection)를 만듭니다. miter limit·variable width와 같은 기하입니다.

데모에서 볼 것

5점 polyline (뾰족한 꺾임 포함):

(100,200) → (200,80) → (320,320) → (440,120) → (540,280)

• 회색 — 원본 polyline
• 파란 — offsetPolyline(points, 28, false) — 코너 루프·교차
• readout: acute corner → offset polyline self-intersects (cusp)

API

import { offsetPolyline } from "svg-matrix-core";

const off = offsetPolyline(points, 28, false);
// closed=false — open polyline

path d 전체는 051 offsetPathD — flatten + 법선.

왜 생기나

        offset B
              \
               \  ← cusp
    --------V--------  centerline
                /
        offset A

013 miter — 좁은 각일수록 교점이 멀어지다 miterlimit → bevel.

완화

Core API

관련

• 077 · 070 · 051

오늘의 핵심

offset ≠ 항상 smooth parallel curve — cusp 정책(bevel / round / simplify)을 스펙에 넣으세요.