AnimatedSVGUnderline: Free Interactions Component by h00mankind

Marketplace Components Categories Interactions

Animated underline component: On hover, one of six hand-drawn SVG styles appears & cycles for variety, then erases when mouse leaves. Adds playful interaction to text.

About this Component

The component is fully responsive, scaling the underline to perfectly match any text length. You can customize everything—fonts, colors, animation timing, and underline thickness—directly in the properties panel. It also supports reduced motion for better accessibility.

Key Features

Dynamic Animation: A hand-drawn underline smoothly draws on hover and erases on exit.
Visual Variety: Cycles through six unique, pre-designed SVG underline styles to keep interactions fresh and organic.
Fully Responsive: Automatically measures text width and scales the underline to match perfectly without distortion.
Highly Customizable: Easily control text, fonts, colors, stroke width, spacing, and animation settings from the property panel.
Accessible Design: Automatically respects user preferences by disabling animations for those who have enabled reduced motion.