Gooey Blob Nav

<!-- Gooey Blob Nav · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gbh-wrap"><svg width="0" height="0"><filter id="gbh-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"/></filter></svg><div class="gbh-goo"><span class="gbh-blob"></span></div><nav class="gbh-nav"><a class="gbh-i is-on">Werk</a><a class="gbh-i">Studio</a><a class="gbh-i">Lab</a><a class="gbh-i">Contact</a></nav></div>
</div>

/* Gooey Blob Nav · NedDev · eigen werk. */
.gbh-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a;font-family:'Switzer',sans-serif}
.gbh-goo{position:absolute;inset:0;filter:url(#gbh-goo);pointer-events:none}
.gbh-blob{position:absolute;height:46px;border-radius:30px;background:#F5480F;top:50%;transform:translateY(-50%);transition:left .45s cubic-bezier(.5,1.5,.4,1),width .45s cubic-bezier(.5,1.5,.4,1)}
.gbh-nav{display:flex;gap:6px;position:relative;z-index:2}.gbh-i{padding:11px 20px;font-weight:700;font-size:clamp(13px,2.6vw,18px);color:#fff;cursor:pointer;transition:color .3s;border-radius:30px}

// Gooey Blob Nav · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var blob=root.querySelector('.gbh-blob');var items=root.querySelectorAll('.gbh-i');
function place(el){var r=el.getBoundingClientRect();blob.style.left=(r.left-root.getBoundingClientRect().left)+'px';blob.style.width=r.width+'px';}
function set(el){items.forEach(function(i){i.classList.remove('is-on');});el.classList.add('is-on');place(el);}
items.forEach(function(el){el.addEventListener('mouseenter',function(){place(el);});el.addEventListener('mouseleave',function(){place(root.querySelector('.gbh-i.is-on'));});el.addEventListener('click',function(){set(el);});});
requestAnimationFrame(function(){set(root.querySelector('.gbh-i.is-on'));});
}
init(document.querySelector('.jouw-container'));