Highlighter Notatie Nieuw

<!-- Highlighter Notatie · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="hln"><div class="hln__wrap"><p class="hln__p">Wij leveren een <span class="hln__a" data-a="highlight">snelle website</span> tegen een <span class="hln__a" data-a="underline">vaste prijs</span>, met <span class="hln__a" data-a="circle">zes weken</span> doorlooptijd en <span class="hln__a" data-a="box">één aanspreekpunt</span> in Den Haag.</p><svg class="hln__svg" aria-hidden="true"></svg></div><button class="hln__re">Opnieuw</button></div>
</div>

/* Highlighter Notatie · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hln{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px 22px;overflow:hidden;font-family:'Switzer',system-ui,sans-serif}
.hln__wrap{position:relative;max-width:330px}
.hln__p{position:relative;margin:0;font-size:17px;line-height:1.75;color:#0a0a0a;font-weight:500}
.hln__a{white-space:nowrap}
.hln__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hln__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hln__svg .hln__hl{stroke:#F5480F;stroke-opacity:.32;mix-blend-mode:multiply}
.hln__svg .hln__ln{stroke:#F5480F;stroke-width:1.8}
.hln__svg .hln__bk{stroke:#0a0a0a;stroke-width:1.4}
.hln__re{position:absolute;right:12px;bottom:10px;border:1px solid #0a0a0a;background:none;border-radius:999px;padding:4px 10px;font:600 11px 'Switzer',system-ui,sans-serif;cursor:pointer;color:#0a0a0a}

// Highlighter Notatie · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hln')||root;var wrap=root.querySelector('.hln__wrap'),svg=root.querySelector('.hln__svg'),ns='http://www.w3.org/2000/svg';var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,shown=false;
var seed=7;function rnd(){seed=(seed*16807)%2147483647;return(seed/2147483647)-.5;}
function line(x1,y1,x2,y2,j){var mx=(x1+x2)/2+rnd()*j,my=(y1+y2)/2+rnd()*j;return 'M'+(x1+rnd()*j).toFixed(1)+','+(y1+rnd()*j).toFixed(1)+' Q'+mx.toFixed(1)+','+my.toFixed(1)+' '+(x2+rnd()*j).toFixed(1)+','+(y2+rnd()*j).toFixed(1);}
function ell(cx,cy,rx,ry){var d='',n=28,st=-2.2+rnd()*.4,tot=Math.PI*2*1.12;for(var i=0;i<=n;i++){var a=st+tot*i/n,k=1+rnd()*.06+(i/n)*.05;var x=cx+Math.cos(a)*rx*k,y=cy+Math.sin(a)*ry*k;d+=(i?' L':'M')+x.toFixed(1)+','+y.toFixed(1);}return d;}
function add(d,cls,w,delay,dur){var p=document.createElementNS(ns,'path');p.setAttribute('d',d);p.setAttribute('class',cls);if(w)p.style.strokeWidth=w+'px';svg.appendChild(p);var L=p.getTotalLength();p.style.strokeDasharray=L;p.style.strokeDashoffset=reduce||delay<0?0:L;if(!reduce&&delay>=0){p.getBoundingClientRect();p.style.transition='stroke-dashoffset '+dur+'ms cubic-bezier(.45,0,.3,1) '+delay+'ms';requestAnimationFrame(function(){requestAnimationFrame(function(){p.style.strokeDashoffset=0;});});}}
function draw(anim){svg.innerHTML='';seed=7;var W=wrap.getBoundingClientRect();var k=0;root.querySelectorAll('.hln__a').forEach(function(el){var type=el.dataset.a;var rs=[].slice.call(el.getClientRects());rs.forEach(function(r){var x=r.left-W.left,y=r.top-W.top,w=r.width,h=r.height;var dl=anim?k*450:-1;
if(type==='highlight'){var sw=h*.62;add(line(x+sw/2-4,y+h*.56,x+w-sw/2+4,y+h*.52,2),'hln__hl',sw,dl,600);}
else if(type==='underline'){add(line(x,y+h*.9,x+w,y+h*.86,2),'hln__ln',0,dl,450);add(line(x+w*.1,y+h*.98,x+w*.95,y+h*.95,2),'hln__ln',0,anim?dl+250:-1,400);}
else if(type==='circle'){add(ell(x+w/2,y+h/2,w/2+9,h/2+1),'hln__ln',0,dl,800);}
else if(type==='box'){var p=4,a=x-p,b=y+3,c=x+w+p,d=y+h-3;add(line(a,b,c,b,1.5)+' '+line(c,b,c,d,1.5).replace('M','L')+' '+line(c,d,a,d,1.5).replace('M','L')+' '+line(a,d,a,b-2,1.5).replace('M','L'),'hln__bk',0,dl,900);}});k++;});}
function play(){shown=true;draw(true);}
root.querySelector('.hln__re').addEventListener('click',play);
var rt;function later(){clearTimeout(rt);rt=setTimeout(function(){if(shown)draw(false);},150);}addEventListener('resize',later);if(document.fonts&&document.fonts.addEventListener)document.fonts.addEventListener('loadingdone',later);if(window.ResizeObserver)new ResizeObserver(later).observe(root.querySelector('.hln__p'));
function start(){if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){play();io.disconnect();}},{threshold:.5});io.observe(root);}else play();}
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(start);else start();
}
init(document.querySelector('.jouw-container'));