Tekst vult zich als een glas New

A large word acts as a glass: orange liquid stands at the amount raised so far. Click the button and a stream pours in, the level rises and sloshes until it settles. For a crowdfunding or donation page, a club sponsorship drive or a thank-you page with a goal.

Speeltuin

€7.240 van €10.000 voor de nieuwe speeltuin van De Klimboom in Deventer

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More text animations

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →