menu toggle clip path reveal

codeswing.json

{
  "scripts": [],
  "styles": [],
  "themePreview": false
}

index.html

<div id="layer">
	<div id="toggle">
		<button>+</button>
	</div>

	<ul id="menu">
		<li><a href="">home</a></li>
		<li><a href="">about</a></li>
		<li><a href="">contact</a></li>
	</ul>
</div>

<div id="content">
	<p>This method of making a menu appear is extremely suboptimal and is only necessary if you absolutely need the <code>box-shadow</code> from the toggle button to be part of the animation (and still it's very certainly better to cheat this because of how suboptimal performances are when animating box-shadow).
	<p>Ligula sagittis porttitor semper dis nascetur cursus torquent varius justo imperdiet auctor hendrerit, diam mi litora tellus convallis nisl parturient platea vivamus nec facilisis. Interdum senectus eget magna per laoreet ad nullam dignissim sociis, praesent ipsum lorem rhoncus hendrerit torquent leo id aptent, velit porta venenatis ante suspendisse lobortis augue duis. Pellentesque euismod gravida rutrum ultricies rhoncus iaculis bibendum sollicitudin fames, egestas praesent justo luctus sagittis venenatis netus aptent sodales, pulvinar ridiculus phasellus sit viverra elit consequat potenti. Commodo vivamus nostra a dui phasellus class cursus nulla metus, massa fringilla tristique fames tellus diam ligula ante aliquet faucibus, orci cubilia nibh parturient semper conubia et accumsan. Litora natoque dolor auctor suspendisse nibh sagittis sem nostra arcu ut tristique fusce, phasellus viverra leo bibendum mi luctus congue libero etiam commodo. Rutrum netus penatibus porta elementum potenti augue urna proin eleifend, scelerisque dui cubilia curae eu nunc tempus maecenas fusce, ad velit parturient aptent primis non bibendum tortor.
	<p>Nascetur facilisis interdum felis metus eget commodo turpis lobortis, cursus tristique posuere varius hac elementum tempus nisi, arcu cum fusce tempor blandit curabitur mi. Mauris nisi vehicula lobortis ornare maecenas proin fames tincidunt auctor convallis suscipit, eu nulla lorem euismod mi ligula amet inceptos parturient vitae, ultrices mattis imperdiet nullam nunc etiam taciti eros tellus eleifend. Felis hac ridiculus sed habitasse parturient vitae ac nulla mollis, morbi varius scelerisque class rhoncus lorem habitant vehicula adipiscing viverra, orci gravida dis enim cras fames posuere cum. Diam turpis inceptos suspendisse posuere sapien viverra vestibulum vel quisque, sollicitudin massa eget libero torquent aliquam habitasse tortor dapibus, augue primis enim lacinia ultricies nunc rhoncus mattis. Euismod viverra mi felis mattis tortor id eleifend tellus at, luctus commodo vitae dis sem rhoncus quis congue, ut sit rutrum pellentesque iaculis diam sagittis ipsum. Diam ante mollis praesent dapibus rutrum varius consectetur nascetur quisque primis, etiam ultricies interdum lobortis a scelerisque quis blandit pulvinar, vulputate lacus adipiscing ac commodo ornare auctor habitasse semper.
	<p>Consequat velit luctus magna tempor fusce vulputate felis nunc donec sem, dis lacus primis urna viverra potenti vitae eu at, conubia odio montes etiam penatibus pharetra est sodales et. Dignissim odio ullamcorper venenatis urna scelerisque lorem, molestie vulputate praesent mollis. Nunc est ligula tincidunt aliquam eget a porttitor, sociis purus elementum semper vestibulum diam libero viverra, tempus netus elit velit faucibus imperdiet. Arcu tortor leo magna sem senectus magnis curabitur fringilla, mauris ut neque proin velit diam justo morbi, cubilia hac fermentum bibendum imperdiet sodales euismod. Ridiculus consectetur euismod parturient viverra posuere primis eleifend nulla cubilia rhoncus pretium taciti, mi faucibus accumsan porttitor neque vel integer turpis egestas rutrum. Eleifend ipsum eros a nascetur quis id conubia netus orci, non dictum mattis natoque sodales sem libero ornare consequat, lorem nibh pharetra parturient varius ut consectetur senectus. Neque tortor inceptos justo eget enim nisl pharetra dis himenaeos fringilla, taciti porta elit sodales leo eu sagittis nulla vestibulum et, hendrerit quam facilisi fermentum penatibus sollicitudin nam libero integer.
</div>

script.js

const layer = document.getElementById('layer')
const toggle = document.getElementById('toggle')
const button = toggle.querySelector('button')

button.addEventListener('click', () => {
	// scale math
	const { height, top } = button.getBoundingClientRect()
	const { innerHeight, innerWidth } = window
	const radius = height / 2
	const offset = radius + top
	const offsetHyp = Math.sqrt(offset * offset * 2)
	const viewportHyp = Math.sqrt(innerWidth ** 2 + innerHeight ** 2)
	const target = viewportHyp - offsetHyp
	layer.style.setProperty('--scale', `${target / radius}`)

	// css class
	layer.classList.toggle('active')
})

style.scss

$duration: 500ms;

#layer {
	--scale: 10;

	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

#toggle {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 40px;
	width: 40px;

	&::before {
		content: '';
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		border-radius: 20px;
		background-color: black;
		transition: transform $duration;
	}

	button {
		position: relative;
		z-index: 2;
		background: transparent;
		border: none;
		height: 100%;
		width: 100%;
		font-size: 20px;
		cursor: pointer;
		outline: none;
		transition: transform $duration;
		pointer-events: all;
		color: white;
	}
}

#menu {
	position: absolute;
	z-index: 1;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	clip-path: circle(20px at 30px 30px);
	transition: clip-path $duration;

	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	font-size: 40px;

	a {
		text-decoration: none;
		color: white;
	}
}

#layer.active {
	#toggle{
		&::before {
			transform: scale(var(--scale));
		}
		button {
			transform: rotate(135deg);
		}
	}
	#menu {
		clip-path: circle(calc(20px * var(--scale)) at 30px 30px);
		pointer-events: all;
	}
}

#content {
	columns: 2;
	max-width: 740px;
	margin: 0 auto;
	padding: 24px;
}