Handgetekende pijl naar de knop Nieuw

<!-- Handgetekende pijl naar de knop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7pk">
<div class="r7pk__in">
<p class="r7pk__h">Nog nooit gedanst? Je eerste les bij Dansschool Pas in Zwolle is gratis.</p>
<div class="r7pk__row">
<div class="r7pk__wijs">
<span class="r7pk__note">kost je twee minuten</span>
<svg class="r7pk__svg" viewBox="0 0 130 80" aria-hidden="true" focusable="false">
<g class="r7pk__v is-on" data-v="krul"><path class="r7pk__l" d="M6 8C28 2 50 8 50 26C50 42 32 44 32 33C32 20 68 22 88 40C98 49 108 56 121 58"/><path class="r7pk__p" d="M109 49L121 58L108 65"/></g>
<g class="r7pk__v" data-v="lus"><path class="r7pk__l" d="M6 14C34 6 62 62 46 62C28 62 46 20 70 36C88 48 102 58 121 58"/><path class="r7pk__p" d="M109 49L121 58L108 65"/></g>
<g class="r7pk__v" data-v="zigzag"><path class="r7pk__l" d="M6 10L26 30L38 16L56 40L70 26L88 50L101 40L121 58"/><path class="r7pk__p" d="M107 52L121 58L110 67"/></g>
</svg>
</div>
<a class="r7pk__btn" href="#r7s-pijlen-knop">Plan je proefles</a>
</div>
<div class="r7pk__keuze" role="group" aria-label="Vorm van de pijl">
<button class="r7pk__k" type="button" data-v="krul" aria-pressed="true">Krul</button>
<button class="r7pk__k" type="button" data-v="lus" aria-pressed="false">Lus</button>
<button class="r7pk__k" type="button" data-v="zigzag" aria-pressed="false">Zigzag</button>
</div>
</div>
</div>
</div>

/* Handgetekende pijl naar de knop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7pk{position:absolute;inset:0;display:grid;place-items:center;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;padding:14px 18px;text-align:left}
.r7pk *,.r7pk *::before,.r7pk *::after{box-sizing:border-box}
.r7pk__in{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.r7pk__h{margin:0;font:600 clamp(15px,5cqi,21px)/1.2 'Switzer',sans-serif;letter-spacing:-.015em;text-wrap:balance}
.r7pk__row{display:grid;grid-template-columns:minmax(0,150px) auto;justify-content:start;align-items:end;gap:4px}
.r7pk__wijs{position:relative;min-width:0}
.r7pk__note{display:block;font:400 13px/1.2 'Switzer',sans-serif;color:#4a4845;margin:0 0 2px 2px}
.r7pk__svg{display:block;width:100%;max-width:150px;height:auto;overflow:visible;transition:transform .2s ease}
.r7pk__v{display:none}
.r7pk__v.is-on{display:inline}
.r7pk__l,.r7pk__p{fill:none;stroke:#F5480F;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.r7pk__btn{display:inline-block;margin-bottom:34px;padding:12px 16px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 15px/1 'Switzer',sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .16s}
.r7pk__btn:hover{background:#2a2826}
.r7pk__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.r7pk__row:has(.r7pk__btn:hover) .r7pk__svg,.r7pk__row:has(.r7pk__btn:focus-visible) .r7pk__svg{transform:translateX(5px)}
.r7pk__keuze{display:flex;gap:6px;flex-wrap:wrap}
.r7pk__k{min-height:28px;padding:4px 10px;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;transition:border-color .16s,background-color .16s}
.r7pk__k:hover{border-color:#0a0a0a}
.r7pk__k[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7pk__k:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Handgetekende pijl naar de knop · © 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('.r7pk');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var groups=[].slice.call(w.querySelectorAll('.r7pk__v')),knoppen=[].slice.call(w.querySelectorAll('.r7pk__k'));
function teken(g){
  var l=g.querySelector('.r7pk__l'),p=g.querySelector('.r7pk__p');
  [l,p].forEach(function(el){var n=el.getTotalLength();el.style.transition='none';el.style.strokeDasharray=n;el.style.strokeDashoffset=rm?0:n;});
  if(rm)return;
  l.getBoundingClientRect();
  l.style.transition='stroke-dashoffset .9s cubic-bezier(.45,.05,.3,1)';l.style.strokeDashoffset=0;
  p.style.transition='stroke-dashoffset .22s ease-out .88s';p.style.strokeDashoffset=0;
}
function kies(v){
  groups.forEach(function(g){g.classList.toggle('is-on',g.getAttribute('data-v')===v);});
  knoppen.forEach(function(b){b.setAttribute('aria-pressed',b.getAttribute('data-v')===v?'true':'false');});
  teken(w.querySelector('.r7pk__v.is-on'));
}
knoppen.forEach(function(b){b.addEventListener('click',function(){kies(b.getAttribute('data-v'));});});
var gezien=false;
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting&&!gezien){gezien=true;kies('krul');io.disconnect();}},{threshold:.4});io.observe(w);}else kies('krul');
}
init(document.querySelector('.jouw-container'));