Merge commit

<div class="demo"><div class="head"><strong>MERGE COMMIT</strong><span id="step">base</span></div><div class="scene"><svg viewBox="0 0 520 140" width="100%" height="100%" aria-label="Branch and merge commit graph"><path d="M45 70 H155 L265 32 H365 L475 70" fill="none" stroke="var(--accent)" stroke-width="3"/><path d="M155 70 H365 L475 70" fill="none" stroke="var(--muted)" stroke-width="3"/><g id="dots"><circle cx="45" cy="70" r="11"/><circle cx="155" cy="70" r="11"/><circle cx="265" cy="32" r="11"/><circle cx="365" cy="70" r="11"/><circle cx="475" cy="70" r="13"/></g><text x="20" y="115">base</text><text x="228" y="18">feature</text><text x="300" y="115">main</text><text x="440" y="115">merge</text></svg></div><div class="foot"><span>two parents → one merge</span><span>tap to step</span></div></div>

.demo{width:min(92vw,660px);height:min(86vh,310px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,20px);display:flex;flex-direction:column;gap:clamp(6px,1.7vmin,12px);box-shadow:0 10px 35px rgba(0,0,0,.07);font:500 clamp(10px,2.8vmin,15px)/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.head,.foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.head strong{color:var(--accent);font-size:1.05em}.foot{color:var(--muted);font-size:.85em;min-height:1.4em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.5vmin,12px)}.chip{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:.4em .6em;text-align:center}.on{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;color:var(--accent)!important}.dim{opacity:.42}.arrow{color:var(--muted)}
svg{max-height:100%}circle{fill:var(--surface);stroke:var(--accent);stroke-width:3;transition:opacity .25s}svg text{fill:var(--muted);font:12px ui-monospace,monospace}

let step=0;const labels=["base","branch","feature commit","main commit","merge"];const dots=[...document.querySelectorAll("circle")];function advance(){dots.forEach((dot,i)=>dot.style.opacity=i<=step?"1":".14");document.getElementById("step").textContent=labels[step];step=(step+1)%labels.length}advance();const timer=setInterval(advance,750);document.querySelector(".demo").addEventListener("pointerdown",()=>{clearInterval(timer);advance()})