Weegschaal die terugverdient New

<!-- Weegschaal die terugverdient · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="fyg">
<svg class="fyg__svg" viewBox="0 0 220 160" aria-hidden="true">
<path class="fyg__paal" d="M110 40V150M80 152H140"/>
<g class="fyg__l"><path class="fyg__draad" d=""/><path class="fyg__bak" d=""/><g class="fyg__in"></g></g>
<g class="fyg__r"><path class="fyg__draad" d=""/><path class="fyg__bak" d=""/><g class="fyg__in"></g></g>
<line class="fyg__balk" x1="30" y1="40" x2="190" y2="40"/>
<circle class="fyg__as" cx="110" cy="40" r="5"/>
</svg>
<div class="fyg__tekst">
<h3 class="fyg__h">Zonnepanelen, 10 stuks</h3>
<p class="fyg__p">Links € 5.400 investering, rechts € 780 besparing per jaar.</p>
<label class="fyg__lbl">Jaren na plaatsing: <output class="fyg__out">3</output><input class="fyg__range" type="range" min="0" max="15" step="1" value="3"></label>
<p class="fyg__st" aria-live="polite">Na 3 jaar: € 2.340 bespaard.</p>
</div>
</div>
</div>

/* Weegschaal die terugverdient · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.fyg{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left}
.fyg *{box-sizing:border-box}
.fyg__svg{flex:0 0 46%;width:46%;height:auto;max-height:100%;overflow:hidden}
.fyg__paal{fill:none;stroke:#0a0a0a;stroke-width:4;stroke-linecap:round}
.fyg__balk{stroke:#0a0a0a;stroke-width:4;stroke-linecap:round}
.fyg__as{fill:#F5480F;stroke:#0a0a0a;stroke-width:2}
.fyg__draad{fill:none;stroke:#0a0a0a;stroke-width:1}
.fyg__bak{fill:#0a0a0a}
.fyg__blok{fill:#0a0a0a}
.fyg__munt{fill:#F5480F;stroke:#0a0a0a;stroke-width:.8}
.fyg__tekst{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fyg__h{margin:0;font:700 18px/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.fyg__p{margin:0;font:400 13px/1.4 'Switzer',sans-serif;color:#3d3b37}
.fyg__lbl{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;width:100%;font:500 13px/1.3 'Switzer',sans-serif}
.fyg__out{font-weight:700}
.fyg__range{width:100%;height:28px;margin:0;accent-color:#F5480F;cursor:pointer}
.fyg__range:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.fyg__st{margin:0;min-height:36px;font:600 13px/1.35 'Switzer',sans-serif}

// Weegschaal die terugverdient · © 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 el=root.querySelector('.fyg');if(!el)return;
var RM=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var NS='http://www.w3.org/2000/svg',balk=el.querySelector('.fyg__balk'),rng=el.querySelector('.fyg__range'),out=el.querySelector('.fyg__out'),st=el.querySelector('.fyg__st');
var S=[el.querySelector('.fyg__l'),el.querySelector('.fyg__r')].map(function(g,i){return{g:g,dr:g.querySelector('.fyg__draad'),bak:g.querySelector('.fyg__bak'),inh:g.querySelector('.fyg__in'),f:0,v:0,pvx:0,px:0,kant:i?1:-1};});
var INV=5400,JR=780,PX=110,PY=40,AR=80,L=58,th=0,om=0,doel=0,raf=0,last=0,vis=true,stil=0;
var blok=document.createElementNS(NS,'rect');blok.setAttribute('class','fyg__blok');blok.setAttribute('x','-15');blok.setAttribute('y','-24');blok.setAttribute('width','30');blok.setAttribute('height','24');blok.setAttribute('rx','2');S[0].inh.appendChild(blok);
function eur(n){return '€ '+n.toLocaleString('nl-NL');}
function munten(n){var g=S[1].inh;while(g.firstChild)g.removeChild(g.firstChild);for(var i=0;i<n;i++){var c=Math.floor(i/5),r=i%5,e=document.createElementNS(NS,'ellipse');e.setAttribute('class','fyg__munt');e.setAttribute('cx',String(-14+c*14));e.setAttribute('cy',String(-3-r*5));e.setAttribute('rx','6.5');e.setAttribute('ry','2.6');g.appendChild(e);}}
function zet(){var j=+rng.value,b=j*JR,d=(b-INV)/INV;doel=Math.max(-.26,Math.min(.26,d*.5));out.textContent=String(j);munten(j);
var t='jaar';st.textContent=b>=INV?'Na '+j+' '+t+' terugverdiend: '+eur(b)+' bespaard.':'Na '+j+' '+t+': '+eur(b)+' bespaard.';
if(RM){th=doel;teken();}else kick();}
function teken(){var c=Math.cos(th),s=Math.sin(th);balk.setAttribute('transform','rotate('+(th*57.2958).toFixed(2)+' '+PX+' '+PY+')');
S.forEach(function(p){var hx=PX+p.kant*AR*c,hy=PY+p.kant*AR*s,bx=hx+L*Math.sin(p.f),by=hy+L*Math.cos(p.f),ca=Math.cos(p.f),sa=Math.sin(p.f);
function pt(x,y){return (bx+x*ca+y*sa).toFixed(1)+' '+(by-x*sa+y*ca).toFixed(1);}
p.dr.setAttribute('d','M'+hx.toFixed(1)+' '+hy.toFixed(1)+'L'+pt(-26,0)+'M'+hx.toFixed(1)+' '+hy.toFixed(1)+'L'+pt(26,0));
p.bak.setAttribute('d','M'+pt(-27,0)+'L'+pt(27,0)+'L'+pt(21,6)+'L'+pt(-21,6)+'Z');
p.inh.setAttribute('transform','translate('+bx.toFixed(1)+' '+by.toFixed(1)+') rotate('+(-p.f*57.2958).toFixed(2)+')');p.px=hx;});}
function tick(t){if(!vis){raf=0;return;}var dt=Math.min(.033,(t-last)/1000);last=t;var n=4,h=dt/n,e=0;
for(var i=0;i<n;i++){var a=34*(doel-th)-3.2*om;om+=a*h;th+=om*h;
S.forEach(function(p){var hvx=-p.kant*AR*Math.sin(th)*om,ax=(hvx-p.pvx)/h;p.pvx=hvx;p.v+=(-22*Math.sin(p.f)-1.6*p.v-ax*.012)*h;p.f+=p.v*h;p.f=Math.max(-.7,Math.min(.7,p.f));});}
teken();e=Math.abs(doel-th)+Math.abs(om)+S.reduce(function(s,p){return s+Math.abs(p.f)+Math.abs(p.v);},0);
if(e<.002){if(++stil>20){raf=0;return;}}else stil=0;raf=requestAnimationFrame(tick);}
function kick(){if(RM||raf)return;stil=0;last=performance.now();S.forEach(function(p){p.pvx=0;});raf=requestAnimationFrame(tick);}
rng.addEventListener('input',zet);
zet();th=RM?doel:-.26;teken();kick();
if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;if(vis)kick();}).observe(el);
}
init(document.querySelector('.jouw-container'));