<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);
});