Wavy Underline Thickness Control

A native CSS wavy underline treatment that tunes text-decoration-thickness and underline offset without adding a separate decorative SVG layer.

Duration: 3s
Resolution: 1440×900
Format: CSS

squigglewavy-underlinetext-decorationthicknessprefers-reduced-motion

Squiggle Underline / Text-decoration Thickness

Wavy Underline Thickness Control

Native wavy underline styling changes visual weight with text-decoration-thickness and offset rather than drawing a separate SVG underline.

inline link wavy underline - 2.8s cycle · 0.62 intensity

Read the motion note

Thin wave · body copy

Inline Link

A thin squiggle keeps inline text readable while still signaling emphasis.

The underline weight breathes subtly by changing decoration thickness and underline offset.

Selected primitive

Broader wave · headline

Editorial Mark

A thicker underline carries a headline highlight without inserting a positioned decoration layer.

Thickness changes stay below the descender collision threshold.

No custom SVG required

Compact copy · fixed offset

Dense Callout

A compact callout uses a stable offset and only modest thickness changes.

The underline animates independently from layout metrics and never changes text width.

Read the motion note

Motion contract: The underline weight breathes subtly by changing decoration thickness and underline offset.
Accessibility: The native text decoration remains visible in static and reduced-motion modes.

Cycle duration2.8s

Motion intensity0.62

Use em-based thickness so the underline scales with font size and zoom.

.squiggle-text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #38bdf8;
  text-decoration-thickness: calc(0.08em * 0.62);
  text-underline-offset: calc(0.18em + 0.05em * 0.62);
  animation: squiggleWeight 2.80s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .squiggle-text { animation: none; }
}