.ccm-donut { width: 200px; height: 200px; display: block; overflow: visible; font-family: ui-monospace, 'SF Mono', monospace; }
.ccm-donut-s { cursor: pointer; transform-origin: 100px 100px; transform: scale(1) translate(0, 0); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s; text-decoration: none; animation: ccm-donut-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) backwards; }
.ccm-donut-s path { stroke: #17171f; stroke-width: 2; transition: filter 0.2s; }
.ccm-donut-l { font: 700 10px/1 ui-monospace, monospace; fill: #fff; letter-spacing: 0.18em; pointer-events: none; opacity: 0.92; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.ccm-donut-c { font: 700 9px/1 ui-monospace, monospace; fill: #c4b5fd; letter-spacing: 0.16em; pointer-events: none; }
.ccm-donut-s:nth-of-type(1):hover, .ccm-donut-s:nth-of-type(1):focus-visible { transform: translate(4px, -4px); }
.ccm-donut-s:nth-of-type(2):hover, .ccm-donut-s:nth-of-type(2):focus-visible { transform: translate(6px, 0px); }
.ccm-donut-s:nth-of-type(3):hover, .ccm-donut-s:nth-of-type(3):focus-visible { transform: translate(4px, 4px); }
.ccm-donut-s:nth-of-type(4):hover, .ccm-donut-s:nth-of-type(4):focus-visible { transform: translate(-4px, 4px); }
.ccm-donut-s:nth-of-type(5):hover, .ccm-donut-s:nth-of-type(5):focus-visible { transform: translate(-6px, 0px); }
.ccm-donut-s:nth-of-type(6):hover, .ccm-donut-s:nth-of-type(6):focus-visible { transform: translate(-4px, -4px); }
.ccm-donut-s:hover path, .ccm-donut-s:focus-visible path { filter: brightness(1.18) saturate(1.1); }
.ccm-donut-s:nth-of-type(1) { animation-delay: 0.05s; }
.ccm-donut-s:nth-of-type(2) { animation-delay: 0.10s; }
.ccm-donut-s:nth-of-type(3) { animation-delay: 0.15s; }
.ccm-donut-s:nth-of-type(4) { animation-delay: 0.20s; }
.ccm-donut-s:nth-of-type(5) { animation-delay: 0.25s; }
.ccm-donut-s:nth-of-type(6) { animation-delay: 0.30s; } <svg class="ccm-donut" viewBox="0 0 200 200" role="navigation" aria-label="Donut menu">
<defs>
<path id="ccm-donut-arc-1" d="M 100 25 A 75 75 0 0 1 164.95 62.5"/>
<path id="ccm-donut-arc-2" d="M 164.95 62.5 A 75 75 0 0 1 164.95 137.5"/>
<path id="ccm-donut-arc-3" d="M 164.95 137.5 A 75 75 0 0 1 100 175"/>
<path id="ccm-donut-arc-4" d="M 35.05 137.5 A 75 75 0 0 1 35.05 62.5"/>
<path id="ccm-donut-arc-5" d="M 100 175 A 75 75 0 0 1 35.05 137.5"/>
<path id="ccm-donut-arc-6" d="M 35.05 62.5 A 75 75 0 0 1 100 25"/>
</defs>
<a href="#" class="ccm-donut-s" style="--c:#7c6cff" aria-label="Plan">
<path d="M 100 100 L 100 10 A 90 90 0 0 1 177.94 55 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-1" startOffset="50%" text-anchor="middle">PLAN</textPath></text>
</a>
<a href="#" class="ccm-donut-s" style="--c:#a78bfa" aria-label="Design">
<path d="M 100 100 L 177.94 55 A 90 90 0 0 1 177.94 145 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-2" startOffset="50%" text-anchor="middle">DESIGN</textPath></text>
</a>
<a href="#" class="ccm-donut-s" style="--c:#ff6c8a" aria-label="Build">
<path d="M 100 100 L 177.94 145 A 90 90 0 0 1 100 190 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-3" startOffset="50%" text-anchor="middle">BUILD</textPath></text>
</a>
<a href="#" class="ccm-donut-s" style="--c:#f5a84a" aria-label="Test">
<path d="M 100 100 L 100 190 A 90 90 0 0 1 22.06 145 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-5" startOffset="50%" text-anchor="middle">TEST</textPath></text>
</a>
<a href="#" class="ccm-donut-s" style="--c:#2ecc8a" aria-label="Ship">
<path d="M 100 100 L 22.06 145 A 90 90 0 0 1 22.06 55 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-4" startOffset="50%" text-anchor="middle">SHIP</textPath></text>
</a>
<a href="#" class="ccm-donut-s" style="--c:#00e5ff" aria-label="Learn">
<path d="M 100 100 L 22.06 55 A 90 90 0 0 1 100 10 Z" fill="var(--c)"/>
<text class="ccm-donut-l"><textPath href="#ccm-donut-arc-6" startOffset="50%" text-anchor="middle">LEARN</textPath></text>
</a>
<circle cx="100" cy="100" r="32" fill="#15151d" stroke="#17171f" stroke-width="3"/>
<text x="100" y="104" class="ccm-donut-c" text-anchor="middle">MENU</text>
</svg> Live preview Edit any tab — preview updates live Ready