JSでInkEffectを作る

結論のコード

after.addEventListener('click', (e) => {
	const ripples = after.getElementsByClassName('ripple');
	Array.from(ripples).forEach(ripple => ripple.remove());
 
	const ripple = document.createElement("div");
	ripple.classList.add('ripple');
	
	ripple.style.position = "absolute";
	ripple.style.transform = "scale(0)";
	ripple.style.animation = "";
	ripple.style.pointerEvents = "none";
	ripple.style.background = "rgba(255, 255, 255, 0.7)";
	ripple.style.borderRadius = "50%";
	
	const rect = after.getBoundingClientRect();
	const x = e.clientX - rect.left;
	const y = e.clientY - rect.top;
 
	const w = after.offsetWidth;
	const h = after.offsetHeight;
	const dia = Math.sqrt(w * w + h * h);
 
	ripple.style.width = ripple.style.height = dia * 2 + 'px';
	ripple.style.left = x - dia + 'px';
	ripple.style.top = y - dia + 'px';
 
	after.appendChild(ripple);
 
	ripple.animate([
		{ transform: "scale(1)", opacity: "0"}
	], {
		duration: 1000,
		easing: "ease-in-out"
	})
 
	setTimeout(() => ripple.remove(), 1000);
});