Liquid Blob Nav Indicator

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="blob-nav">
  <span class="blob-nav__blob">
  </span>
  <a href="#" class="blob-nav__item is-active">Overview</a>
  <a href="#" class="blob-nav__item">Reports</a>
  <a href="#" class="blob-nav__item">Settings</a>
</nav>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.blob-nav {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: #14141a;
  border: 1px solid #24242c;
  font-family: system-ui, sans-serif;
}
.blob-nav__item {
  position: relative;
  z-index: 1;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #8a8a94;
  text-decoration: none;
  transition: color 0.3s ease;
}
.blob-nav__item.is-active {
  color: #06120c;
}
.blob-nav__blob {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 96px;
  height: calc(100% - 10px);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.6);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: blob-morph 4s ease-in-out infinite;
}
@keyframes blob-morph {
  0%, 100% {
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  }
  33% {
    border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
  }
  66% {
    border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%;
  }
}
.blob-nav:hover .blob-nav__blob {
  width: 90px;
}