Password Reveal

<label class="nuda-pwreveal">
  <input type="password" />
  <button type="button" class="nuda-pwreveal__btn" aria-label="Toggle visibility">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path class="nuda-pwreveal__eye"
            d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z" />
      <circle class="nuda-pwreveal__pupil" cx="12" cy="12" r="3" />
      <path class="nuda-pwreveal__slash" d="M3 3l18 18" />
    </svg>
  </button>
</label>

const wrap = document.querySelector('.nuda-pwreveal');
const input = wrap.querySelector('input');
const btn = wrap.querySelector('.nuda-pwreveal__btn');

btn.addEventListener('click', () => {
  const reveal = input.type === 'password';
  input.type = reveal ? 'text' : 'password';
  btn.classList.toggle('is-active', reveal);
});

.nuda-pwreveal {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 280px;
}

.nuda-pwreveal input {
  width: 100%;
  padding: 10px 38px 10px 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #fafafa;
  font-size: 13px;
  outline: none;
  letter-spacing: .04em;
  transition: border-color .2s,box-shadow .25s;
}

.nuda-pwreveal input:focus {
  border-color: #e4ff54;
  box-shadow: 0 0 0 3px rgba(228,255,84,.12);
}

.nuda-pwreveal__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #a0a0a8;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color .2s,background .2s;
}

.nuda-pwreveal__btn:hover {
  color: #fafafa;
  background: rgba(255,255,255,.06);
}

.nuda-pwreveal__btn svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.nuda-pwreveal__slash {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset .35s ease;
}

.nuda-pwreveal__pupil,.nuda-pwreveal__eye {
  transition: transform .25s,opacity .25s;
}

.nuda-pwreveal__btn.is-active .nuda-pwreveal__slash {
  stroke-dashoffset: 0;
}

.nuda-pwreveal__btn.is-active .nuda-pwreveal__pupil {
  transform: scale(0);
  transform-origin: 12px 12px;
}