AnimatedSVGUnderline
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.
Make it with Workshop
Build your own component with AI
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.
