Tekst vult zich als een glas Nieuw

<!-- Tekst vult zich als een glas · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7g">
<h3 class="t7g__sr">Speeltuin</h3>
<div class="t7g__art" aria-hidden="true"></div>
<div class="t7g__row">
<p class="t7g__st" role="status">€7.240 van €10.000 voor de nieuwe speeltuin van De Klimboom in Deventer</p>
<button class="t7g__btn" type="button">Schenk €500 bij</button>
</div>
</div>
</div>

/* Tekst vult zich als een glas · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7g{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:14px 20px;container-type:size;font-family:'Switzer',sans-serif;box-sizing:border-box}
.t7g__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.t7g__art svg{display:block;width:100%;height:auto;max-height:62cqh}
.t7g__row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.t7g__st{margin:0;font-size:clamp(12px,3.2cqi,14px);line-height:1.4;color:#3a3a3a;font-variant-numeric:tabular-nums}
.t7g__st b{color:#0a0a0a;font-weight:700}
.t7g__btn{flex:none;min-height:34px;padding:8px 12px;border:0;border-radius:4px;background:#F5480F;color:#0a0a0a;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.t7g__btn:hover{background:#ff6a36}
.t7g__btn:active{transform:translateY(1px)}
.t7g__btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}

// Tekst vult zich als een glas · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.t7g'),art=w.querySelector('.t7g__art'),st=w.querySelector('.t7g__st'),btn=w.querySelector('.t7g__btn');
var uid='t7g'+Math.random().toString(36).slice(2,8),NS='http://www.w3.org/2000/svg';
art.innerHTML='<svg viewBox="0 0 400 150"><defs><clipPath id="'+uid+'"><text x="200" y="116" text-anchor="middle" textLength="384" lengthAdjust="spacingAndGlyphs" font-family="Switzer,sans-serif" font-weight="900" font-size="118">Speeltuin</text></clipPath></defs>'+
'<text x="200" y="116" text-anchor="middle" textLength="384" lengthAdjust="spacingAndGlyphs" font-family="Switzer,sans-serif" font-weight="900" font-size="118" fill="#e6e3de">Speeltuin</text>'+
'<rect class="t7g__stream" x="317" y="-4" width="7" height="0" rx="3" fill="#F5480F"/>'+
'<g clip-path="url(#'+uid+')"><path class="t7g__w2" fill="#ff8a5c"/><path class="t7g__w1" fill="#F5480F"/></g>'+
'<text x="200" y="116" text-anchor="middle" textLength="384" lengthAdjust="spacingAndGlyphs" font-family="Switzer,sans-serif" font-weight="900" font-size="118" fill="none" stroke="#0a0a0a" stroke-width="1.6">Speeltuin</text></svg>';
var w1=art.querySelector('.t7g__w1'),w2=art.querySelector('.t7g__w2'),stream=art.querySelector('.t7g__stream');
var GOAL=10000,START=7240,amount=START,lvl=0,lvlT=0,amp=1.2,t=0,raf=0,pourUntil=0,reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function yOf(a){return 136-(Math.min(a,GOAL)/GOAL)*108;}
function eur(n){return '€'+n.toLocaleString('nl-NL');}
function wave(path,y,ph,a){var d='M-10 150L-10 '+y.toFixed(1);for(var x=-10;x<=410;x+=10){d+='L'+x+' '+(y+Math.sin(x/34+t*2.6+ph)*a+Math.sin(x/13-t*3.7+ph)*a*.35).toFixed(2);}path.setAttribute('d',d+'L410 150Z');}
function draw(){wave(w2,lvl-2,1.7,amp*1.1);wave(w1,lvl,0,amp);var pour=performance.now()<pourUntil;stream.setAttribute('height',pour?Math.max(0,lvl+4):0);}
function loop(){raf=0;t+=.016;lvl+=(lvlT-lvl)*.06;var pour=performance.now()<pourUntil;if(!pour)amp+=(0.0-amp)*.012;draw();if(w.isConnected&&(pour||amp>.12||Math.abs(lvlT-lvl)>.05))raf=requestAnimationFrame(loop);}
function setText(){st.innerHTML=amount>=GOAL?'<b>Doel gehaald.</b> Dank je wel, Deventer: de speeltuin van De Klimboom komt er.':'<b>'+eur(amount)+'</b> van '+eur(GOAL)+' voor de nieuwe speeltuin van De Klimboom in Deventer';btn.textContent=amount>=GOAL?'Begin opnieuw':'Schenk €500 bij';}
lvl=lvlT=yOf(amount);amp=reduce?0:1.4;draw();setText();if(!reduce)raf=requestAnimationFrame(loop);
btn.addEventListener('click',function(){if(amount>=GOAL){amount=START;}else{amount=Math.min(GOAL,amount+500);if(!reduce){pourUntil=performance.now()+900;amp=Math.max(amp,4.5);}}lvlT=yOf(amount);if(reduce){lvl=lvlT;draw();}else if(!raf)raf=requestAnimationFrame(loop);setText();});
}
init(document.querySelector('.jouw-container'));