Design engineering
Note 01
A frame without seams
Why a single compound path is more reliable than overlapping SVG fragments, and how the responsive geometry stays exact.
The original perimeter looked continuous, but it was painted by four CSS strips, four transformed corner fills, and two more header flanks. Every shared endpoint belonged to a different rasterization operation. That made a transparent sliver possible whenever layout, zoom, or device-pixel rounding moved one fragment differently from its neighbor.
The repair changes the ownership model. A pure geometry function now generates one even-odd SVG path: an overscanned outer rectangle minus a responsive inner opening. On wide screens, the opening bends around the header bridge. On compact screens, it begins below the full-width header. The topology never changes, only its measured coordinates do.
Golden-ratio powers choose bounded proportions, while exact cubic tangent construction handles the corners. Phi is useful for scale. It is not a substitute for the quarter-circle coefficient where the geometry already has a better answer.
- One fill operation owns every join
- Cubic endpoint tangents preserve G1 continuity
- Device-pixel observation prevents guessed rounding
