<nav>
  <ul>
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li><a href="#0">Contact</a></li>
    <li><a href="#0">Dance</a></li>
  </ul>
</nav>

nav {
  background: #0e1238;
  font-family: "Bowlby One SC", no-serif;
  overflow: hidden;
}
ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50vh 50vh;
  list-style: none;
}
li {
  position: relative;
}
a {
  color: #e8984c;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  font-size: calc(1rem + 6vw);
}

li:last-child:after,
li:last-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  clip-path: circle(0);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 1s, clip-path 1s, transform 1s 1s;
}
li:last-child:after {
  background: white;
  mix-blend-mode: exclusion;
}
li:last-child:before {
  background: #55b992;
  -webkit-clip-path: circle(0); 
  mix-blend-mode: color-dodge;
}

li:hover ~ li:last-child:after,
li:last-child:hover:after,
li:hover ~ li:last-child:before,
li:last-child:hover:before {
  opacity: 1;
  transition: 1s ease;
}
li:first-child:hover ~ li:last-child:after {
  transform: translate3d(-100%, -100%, 0);
  clip-path: circle(7.5vw);
}
li:first-child:hover ~ li:last-child:before {
  transform: translate3d(-115%, -110%, 0);
  clip-path: circle(5vw);
}
li:nth-child(2):hover ~ li:last-child:after {
  transform: translate3d(-10%, -105%, 0);
  clip-path: circle(3vw);
}
li:nth-child(2):hover ~ li:last-child:before {
  transform: translate3d(0%, -100%, 0);
  clip-path: circle(4.5vw);
}
li:nth-child(3):hover ~ li:last-child:after {
  transform: translate3d(-95%, 0%, 0);
  clip-path: circle(6.5vw);
}
li:nth-child(3):hover ~ li:last-child:before {
  transform: translate3d(-105%, 10%, 0);
  clip-path: circle(6.5vw);
}
li:last-child:hover:after {
  transform: translate3d(-5%, 0%, 0);
  clip-path: circle(5.5vw);
}
li:last-child:hover:before {
  transform: translate3d(4%, 0%, 0);
  clip-path: circle(4.5vw);
}

@media (max-width: 30em) {
  nav a {
    font-size: 4rem;
  }
  ul {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  li {
    flex: 1;
  }
  li:last-child:after,
  li:last-child:before
  {
    transform: translate3d(0%, -150%, 0);
  }
  li:first-child:hover ~ li:last-child:after {
    transform: translate3d(0, -300%, 0);
    clip-path: circle(11vh);
  }
  li:first-child:hover ~ li:last-child:before {
    transform: translate3d(10%, -290%, 0);
    clip-path: circle(9vh);
  }
  li:nth-child(2):hover ~ li:last-child:after {
    transform: translate3d(0%, -200%, 0);
    clip-path: circle(6vh);
  }
  li:nth-child(2):hover ~ li:last-child:before {
    transform: translate3d(10%, -195%, 0);
    clip-path: circle(7vh);
  }
  li:nth-child(3):hover ~ li:last-child:after {
    transform: translate3d(0, -100%, 0);
    clip-path: circle(8vh);
  }
   li:nth-child(3):hover ~ li:last-child:before {
    transform: translate3d(-10%, -100%, 0);
    clip-path: circle(4vh);
  }
  li:last-child:hover:after {
    transform: translate3d(0%, 0%, 0);
    clip-path: circle(8vh);
  }
  li:last-child:hover:before {
    transform: translate3d(20%, 0%, 0);
    clip-path: circle(6vh);
  }
}