404 met losse stekker Nieuw

<!-- 404 met losse stekker · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7sk">
<svg class="r7sk__svg" viewBox="0 0 300 100" aria-hidden="true" focusable="false">
<path class="r7sk__snoer" d="M-6 84C40 84 60 50 104 50"/>
<g class="r7sk__stekker"><rect x="104" y="38" width="34" height="24" rx="4"/><path class="r7sk__pin" d="M138 44H152M138 56H152"/><path class="r7sk__ribbel" d="M114 42V58M121 42V58"/></g>
<g class="r7sk__vonk"><path d="M196 34L203 26M200 50H211M196 66L203 74"/></g>
<rect class="r7sk__plaat" x="186" y="22" width="56" height="56" rx="6"/>
<circle class="r7sk__gat" cx="214" cy="44" r="2.6"/><circle class="r7sk__gat" cx="214" cy="56" r="2.6"/>
<circle class="r7sk__led" cx="232" cy="32" r="3"/>
<path class="r7sk__muur" d="M260 8V92"/>
</svg>
<div class="r7sk__txt">
<h3 class="r7sk__h">Hier zit de stekker eruit</h3>
<p class="r7sk__p">Deze pagina bestaat niet meer. Elektro Visser in Amersfoort helpt je graag verder.</p>
<a class="r7sk__a" href="#r7s-stekker-404">Stekker erin, naar de homepage</a>
</div>
</div>
</div>

/* 404 met losse stekker · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7sk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 20px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;overflow:hidden}
.r7sk *,.r7sk *::before,.r7sk *::after{box-sizing:border-box}
.r7sk__svg{display:block;width:100%;height:auto;max-height:42cqh;overflow:visible}
.r7sk__snoer{fill:none;stroke:#0a0a0a;stroke-width:3.5;stroke-linecap:round}
.r7sk__stekker rect{fill:#0a0a0a}
.r7sk__pin{stroke:#8a8781;stroke-width:3;stroke-linecap:round}
.r7sk__ribbel{stroke:#3a3835;stroke-width:1.5}
.r7sk__plaat{fill:#fff;stroke:#0a0a0a;stroke-width:1.5}
.r7sk__gat{fill:#0a0a0a}
.r7sk__led{fill:#d6d3cd;transition:fill .2s .15s}
.r7sk__muur{stroke:#c9c6c0;stroke-width:1.5}
.r7sk__vonk path{fill:none;stroke:#F5480F;stroke-width:2.2;stroke-linecap:round;opacity:0}
.r7sk.is-in .r7sk__led{fill:#F5480F}
.r7sk.is-in .r7sk__vonk path{animation:r7sk-vonk .45s ease-out .12s}
@keyframes r7sk-vonk{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(-6px)}}
.r7sk__txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.r7sk__h{margin:0;font:650 clamp(17px,5.6cqi,24px)/1.1 'Switzer',sans-serif;letter-spacing:-.02em}
.r7sk__p{margin:0;font:400 clamp(12px,3.4cqi,14px)/1.4 'Switzer',sans-serif;color:#45433f;max-width:34em}
.r7sk__a{margin-top:2px;padding:10px 14px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 14px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.r7sk__a:hover{background:#2a2826}
.r7sk__a:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.r7sk.is-in .r7sk__vonk path{animation:none}}

// 404 met losse stekker · © 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('.r7sk');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var snoer=w.querySelector('.r7sk__snoer'),stekker=w.querySelector('.r7sk__stekker'),knop=w.querySelector('.r7sk__a'),svg=w.querySelector('.r7sk__svg');
var x=0,doelX=0,t=0,raf=0,zicht=true,laatste=0;
function teken(){
  var inn=x/62,zwaai=rm?0:Math.sin(t*1.6)*(1-inn)*7,y=50+zwaai*0.5,rot=zwaai*0.9*(1-inn);
  var ex=104+x;
  snoer.setAttribute('d','M-6 84C'+(40+x*0.3).toFixed(1)+' '+(84-inn*20).toFixed(1)+' '+(60+x*0.6+zwaai).toFixed(1)+' '+(y+zwaai*0.6).toFixed(1)+' '+ex.toFixed(1)+' '+y.toFixed(1));
  stekker.setAttribute('transform','translate('+x.toFixed(1)+' '+(y-50).toFixed(1)+') rotate('+rot.toFixed(2)+' 104 50)');
}
function lus(nu){raf=0;var dt=laatste?Math.min(50,nu-laatste)/1000:0;laatste=nu;t+=dt;x+=(doelX-x)*Math.min(1,dt*11);if(Math.abs(doelX-x)<.3)x=doelX;teken();
  var rust=rm&&x===doelX;if(zicht&&!rust)raf=requestAnimationFrame(lus);}
function start(){if(!raf&&zicht){laatste=0;raf=requestAnimationFrame(lus);}}
function erin(){doelX=62;w.classList.add('is-in');start();}
function eruit(){doelX=0;w.classList.remove('is-in');start();}
knop.addEventListener('pointerenter',erin);knop.addEventListener('pointerleave',function(){if(document.activeElement!==knop)eruit();});
knop.addEventListener('focus',erin);knop.addEventListener('blur',eruit);
svg.addEventListener('pointerenter',erin);svg.addEventListener('pointerleave',function(){if(document.activeElement!==knop)eruit();});
if('IntersectionObserver' in window){new IntersectionObserver(function(e){zicht=e[0].isIntersecting;start();}).observe(w);}
teken();start();
}
init(document.querySelector('.jouw-container'));