Handgetekende krabbel onder een woord Nieuw

Een SVG-krabbel tekent zich onder of om één woord in een kop: onderstreping, omcirkeling, dubbele streep en markeerstift. stroke-dashoffset met pathLength=1, pure CSS; hover of focus op de kop tekent hem opnieuw. Werkt in elke browser, bij reduced motion staat de krabbel er direct. Eén keer per pagina, op het woord waar het om draait.

Wij bouwen het gewoon zoals afgesproken.

Eerst luisteren, dan pas tekenen.

Vaste prijs, geen meerwerk.

Binnen 48 uur een offerte.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Handgetekende krabbel onder een woord · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hto">
  <p class="hto__h" tabindex="0">Wij bouwen het <span class="hto__w">gewoon<svg viewBox="0 0 120 14" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M3 9.5c14-3.5 30-5 48-4.6 20 .4 34 1.6 47 .9 8-.4 14-1.6 19-3.2"/></svg></span> zoals afgesproken.</p>
  <p class="hto__h" tabindex="0">Eerst <span class="hto__w hto__w--o">luisteren<svg viewBox="0 0 140 50" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M76 6C46 3 10 9 6 24c-4 15 30 21 66 20 34-1 62-8 61-21C132 10 100 3 62 5c-9 .5-17 2-23 4"/></svg></span>, dan pas tekenen.</p>
  <p class="hto__h" tabindex="0">Vaste prijs, <span class="hto__w hto__w--d">geen<svg viewBox="0 0 80 18" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M3 7c20-2.6 46-3.2 74-1.4"/><path pathLength="1" d="M8 14c18-2 40-2.4 66-.6"/></svg></span> meerwerk.</p>
  <p class="hto__h" tabindex="0">Binnen <span class="hto__w hto__w--m">48 uur<svg viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M2 17c30-1.6 62-2.4 96-1"/></svg></span> een offerte.</p>
</div>
</div>

/* Handgetekende krabbel onder een woord · NedDev · eigen werk. */
.hto{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;align-content:center;padding:16px 20px;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:inline-size}
.hto__h{margin:0;font:700 clamp(15px,4.6cqi,21px)/1.2 'Switzer',sans-serif;letter-spacing:-.02em;padding:10px 0;border-top:1px solid #e6e3de;outline:none}
.hto__h:focus-visible{box-shadow:0 0 0 2px #F5480F;border-radius:2px}
.hto__w{position:relative;display:inline-block;white-space:nowrap}
.hto__w svg{position:absolute;left:-4%;width:108%;bottom:-.32em;height:.42em;overflow:visible;pointer-events:none}
.hto__w path{fill:none;stroke:#F5480F;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hto__w--o svg{left:-14%;width:128%;top:-.38em;bottom:auto;height:1.9em}
.hto__w--o path{stroke-width:2.2}
.hto__w--d svg{bottom:-.38em;height:.5em}
.hto__w--d path{stroke-width:2.4}
.hto__w--m{z-index:0}
.hto__w--m svg{bottom:auto;top:-.05em;height:1.3em;z-index:-1;left:-3%;width:106%}
.hto__w--m path{stroke:#ffc7b3;stroke-width:15;stroke-linecap:butt;mix-blend-mode:multiply}
@media (prefers-reduced-motion:no-preference){
  .hto__w path{stroke-dashoffset:1;animation:hto-draw .9s cubic-bezier(.6,.1,.3,1) .4s forwards}
  .hto__h:nth-child(2) path{animation-delay:.9s}
  .hto__h:nth-child(3) path{animation-delay:1.4s}
  .hto__h:nth-child(3) path+path{animation-delay:1.75s}
  .hto__h:nth-child(4) path{animation-delay:2s;animation-duration:.6s}
  .hto__h:hover path,.hto__h:focus-visible path{animation-name:hto-redraw;animation-delay:0s}
  .hto__h:hover path+path,.hto__h:focus-visible path+path{animation-delay:.3s}
}
@keyframes hto-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hto-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@container (max-width:360px){.hto{gap:4px 16px;padding:12px 14px}}

Meer uit tekstanimaties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →