<div class="container">
  <nav id="nav">
    <a href="#home"><svg viewBox="0 0 576 512" width="100" title="home">
        <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" />
      </svg> Home</a>
    <a href="#about"><svg viewBox="0 0 576 512" width="100" title="book-open">
        <path d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z" />
      </svg> About</a>
    <a href="#contact"><svg viewBox="0 0 576 512" width="100" title="comments">
        <path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z" />
      </svg> Contact</a>
    <a href="#store"><svg viewBox="0 0 616 512" width="100" title="store">
        <path d="M602 118.6L537.1 15C531.3 5.7 521 0 510 0H106C95 0 84.7 5.7 78.9 15L14 118.6c-33.5 53.5-3.8 127.9 58.8 136.4 4.5.6 9.1.9 13.7.9 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18.1 20.1 44.3 33.1 73.8 33.1 4.7 0 9.2-.3 13.7-.9 62.8-8.4 92.6-82.8 59-136.4zM529.5 288c-10 0-19.9-1.5-29.5-3.8V384H116v-99.8c-9.6 2.2-19.5 3.8-29.5 3.8-6 0-12.1-.4-18-1.2-5.6-.8-11.1-2.1-16.4-3.6V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32V283.2c-5.4 1.6-10.8 2.9-16.4 3.6-6.1.8-12.1 1.2-18.2 1.2z" />
      </svg> Store</a>
  </nav>
</div>

body {
  height: 100vh;
  max-width: 100%;
  overflow: clip;
  margin: 0;
  display: grid;
  place-items: center;
}

.container {
  position: relative;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  a {
    text-decoration: none;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: #455a64;
    padding: 0.5rem 1rem;
    svg {
      pointer-events: none;
      width: 1.2em;
      fill: currentColor;
    }
    &:hover,
    &:focus {
      color: #1e88e5;
    }
  }
}

#duplicate-nav {
  position: absolute;
  inset: 0;
  background: #1e88e5;
  pointer-events: none;

  clip-path: inset(0 77% 0 0% round 1rem);
  transition: clip-path 0.2s;

  a {
    color: white;
  }
}

const nav = document.querySelector("#nav");

// duplicate and insert
const duplicate = nav.cloneNode(true);

// make sure it has a unique ID
duplicate.id = "duplicate-nav";

// Hide the duplicate from screen reader users
duplicate.setAttribute("aria-hidden", true);

nav.parentNode.insertBefore(duplicate, nav.nextSibling);

nav.addEventListener("click", (e) => {
  // target is reliable as the SVG icons have `pointer-events: none`
  const link = e.target;

  // the magic math for figuring out the new clip path.
  const { offsetLeft, offsetWidth } = link;
  const clipLeft = offsetLeft;
  const clipRight = offsetLeft + offsetWidth;
  duplicate.style.clipPath = `inset(0 ${Number(
    100 - (clipRight / duplicate.offsetWidth) * 100
  ).toFixed()}% 0 ${Number(
    (clipLeft / duplicate.offsetWidth) * 100
  ).toFixed()}% round 1rem)`;
});