프레그난츠의 법칙

<div class="stage">
  <div class="pane"><div class="tag">A · drawn</div>
    <svg viewBox="0 0 100 90"><g class="shapes" id="ga"></g></svg>
  </div>
  <div class="pane"><div class="tag">B · perceived</div>
    <svg viewBox="0 0 100 90"><g class="shapes" id="gb"></g><polygon points="50,10 15,78 85,78" class="ghost" /></svg>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:2}
svg{width:100%;height:100%}
.shapes circle{fill:var(--fg)}
.ghost{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;animation:reveal 3s ease-in-out infinite}
@keyframes reveal{0%,40%{opacity:0}60%,90%{opacity:.8}100%{opacity:0}}

const wedge = (cx, cy, rot) => `
<circle cx="${cx}" cy="${cy}" r="9" style="clip-path:polygon(50% 50%, 100% 0, 100% 100%);transform:rotate(${rot}deg);transform-origin:${cx}px ${cy}px" />`;
const pts = [[50, 14, 210], [17, 76, -30], [83, 76, 90]];
const svgA = document.getElementById('ga');
const svgB = document.getElementById('gb');
svgA.innerHTML = pts.map((p) => wedge(...p)).join('');
svgB.innerHTML = pts.map((p) => wedge(...p)).join('');