Handgetekende krabbel onder een woord New

An SVG scribble draws itself under or around one word in a heading: underline, circle, double stroke and highlighter. stroke-dashoffset with pathLength=1, pure CSS; hovering or focusing the heading redraws it. Works in every browser, with reduced motion the scribble is simply there. Once per page, on the word that matters.

Wij bouwen het gewoon zoals afgesproken.

Eerst luisteren, dan pas tekenen.

Vaste prijs, geen meerwerk.

Binnen 48 uur een offerte.

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.
No JavaScript needed.

<!-- 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}}

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 →