---
title: "AnimatedSVGUnderline — Free Framer component · Best of Framer"
description: "Free Framer component · by h00mankind · Text. The component is fully responsive, scaling the underline to perfectly match any text length."
canonical: "https://framer.elliotli.dev/component/animatedsvgunderline"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/AnimatedSVGUnderline

# AnimatedSVGUnderline

[View on Framer](https://framer.com/marketplace/components/animatedsvgunderline/?via=elliot-li)

![AnimatedSVGUnderline preview image 1](https://framer.elliotli.dev/og/component/animatedsvgunderline/885bd69e7fe71525/1600x1200.jpg)

## Summary

The component is fully responsive, scaling the underline to perfectly match any text length.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #778

## Details

- **Author**: h00mankind
- **Published**: 2025-10-22
- **Updated**: 2025-10-22
- **Added**: 2025-10-12
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos