← All effectsMarker underline

WBL effects library · batch 2 (GSAP) · #02

Marker underline

A hand-drawn underline or loop draws itself under the one word in a heading that sells.

Use it for: Everyone: "same day", "free estimate", "actually clean", "walk-ins welcome". Trades and cleaners most.
When: One key promise per page, ideally the hero or the offer heading.
Don't: Several per screen, decorative words ("quality"), or a word that isn't true for this business.
How: An absolutely positioned SVG stroke behind the word (non-scaling stroke, so it stretches to any word); DrawSVG draws it once when seen. Text never moves.
Weight: 1.1 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 + DrawSVG 2.2 KB gzipped (shared by every effect on the page). Plugins: DrawSVG.

Scroll ↓

Leaks fixed same day, or the visit is free.

Carpets that are actually clean.

← All effects