<div>
	<input type="password" />
	<svg class="close" viewBox="0 0 100 100">
		<path id="top-eye-part" d="M10,50 Q50,-10 90,50" fill="none" stroke-width="5"></path>
		<path id="bottom-eye-part" d="M10,50 Q50,110 90,50" fill="none" stroke-width="5"></path>
		<circle cx="50" cy="50" r="10" fill="black"></circle>
	</svg>
</div>

:root {
	--primary: #6441a5;
	--white: #ffffff;
	--greyLight-1: #e4ebf5;
	--greyLight-2: #c8d0e7;
	--shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
		-0.2rem -0.2rem 0.5rem var(--white);
	--inner-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2),
		inset -0.2rem -0.2rem 0.5rem var(--white);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background: var(--greyLight-1);
}
div {
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
input {
	width: 60vmin;
	height: 15vmin;
	border: none;
	border-radius: 1rem;
	outline: none;
	font-size: 7.5vmin;
	font-weight: bold;
	padding: 0 4vmin;
	box-shadow: var(--inner-shadow);
	background: var(--greyLight-1);
	color: var(--primary);
	caret-color: var(--primary);
}
svg {
	width: 12.5vmin;
	height: 12.5vmin;
	border-radius: 0.5rem;
	box-shadow: var(--shadow);
	margin: 0 4vmin;
	cursor: pointer;
}
svg path {
	transition: all 0.25s 0.25s ease, all 0.25s ease;
	transform-origin: center center;
	stroke: var(--primary);
}
svg circle {
	transition: all 0.25s ease, all 0.25s 0.25s ease;
	transform-origin: center center;
	fill: var(--primary);
}
svg.close circle {
	transition: all 0.25s 0.25s ease, all 0.25s ease;
	transform: scale(0);
}
svg.close #top-eye-part {
	transition: all 0.25s ease, all 0.25s 0.25s ease;
	d: path("M10,50 Q50,110 90,50");
}

const svg = document.querySelector("svg");
const input = document.querySelector("input");
svg.addEventListener("click", function () {
	this.classList.toggle("close");
	setTimeout(() => {
		input.type = input.type === "password" ? "text" : "password";
	}, 125);
});