Rolling Squiggle
Underline & Decoration · Animated · pure CSS
A wavy underline strip whose sine pattern rolls sideways forever, like a ribbon scrolling beneath the word. Built from a tiny inline SVG wave tile — hue baked straight into the stroke — repeated as a background and marched via an animated background-position-x for a seamless, endless roll.
How it works
Rolling Squiggle is an animated underline & decoration text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Rolling Squiggle exposes 3 dedicated controls — Hue, Roll Speed and Wave Size — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Rolling Squiggle — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 900;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
display: inline-block;
position: relative;
color: hsl(227 20% 94%);
padding-bottom: 15px;
}
.text-effect::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2212%22%20viewBox%3D%220%200%2021%2012%22%3E%3Cpath%20d%3D%22M0%2C6%20Q5.25%2C1.4%2010.5%2C6%20T21%2C6%22%20fill%3D%22none%22%20stroke%3D%22hsl(227%2090%25%2064%25)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat-x;
background-size: 21px 12px;
background-position: 0 0;
animation: text-effect-roll 2.1s linear infinite;
}
@keyframes text-effect-roll {
from { background-position-x: 0; }
to { background-position-x: -21px; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- Inline SVG wave tile animated via background-position-x
- Capabilities
- pure