Text Link with Animated Curved Underline

This pattern works well for editorial links, product-feature calls to action, and secondary actions that need emphasis without the visual weight of a filled button. The animation should support recognition rather than carry meaning: visitors must be able to understand where the link goes even if the curve never animates.

Live example

Move a pointer over the link or focus it with the keyboard. The curved stroke draws beneath the text. The destination is represented by a fragment link here; replace it with the real destination in your project.

How the effect works

The anchor remains the interactive element, so its label is available to browsers, keyboard users, and assistive technology as ordinary text. The SVG is positioned inside the label only as decoration. Its aria-hidden="true" attribute prevents the curve from becoming a redundant announcement, while focusable="false" helps prevent older SVG implementations from treating it as a separate keyboard stop.

The path uses a cubic Bézier curve. In d="M3 8 C45 15, 84 14, 112 8 S177 1, 217 8", the first command establishes the starting point, the first cubic segment dips downward, and the smooth continuation rises and dips again. Adjust the control points to make the underline flatter, deeper, or more playful. Keep the viewBox wide enough that the curve does not become cramped when the link label changes.

Instead of moving the SVG or changing the link’s layout, the example animates stroke-dashoffset. This keeps the visual effect confined to the stroke. The default state is intentionally quiet: the path is present but hidden, and hover or keyboard focus reveals it by reducing the dash offset. CSS transitions are enough for this small interaction; a JavaScript animation library would add complexity without solving a problem here.

Copyable HTML and CSS

The following listing is the self-contained version of the demo. It contains no script and can be adapted to an existing link component. Replace the fragment destination and tune the custom properties for your design system.

<style>
.curved-link {
  --ink: #172033;
  --accent: #e85d3f;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.curved-link__label {
  position: relative;
  display: inline-block;
  padding: .15rem .2rem .65rem;
}
.curved-link__curve {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .8rem;
  pointer-events: none;
}
.curved-link__curve path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-width: 5;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 420ms cubic-bezier(.2,.8,.2,1);
}
.curved-link:hover .curved-link__curve path,
.curved-link:focus-visible .curved-link__curve path {
  stroke-dashoffset: 0;
}
.curved-link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .curved-link__curve path {
    stroke-dashoffset: 0;
    transition: none;
  }
}
</style>

<a class="curved-link" href="/collection">
  <span class="curved-link__label">
    Explore the collection
    <svg class="curved-link__curve" viewBox="0 0 220 16"
      aria-hidden="true" focusable="false">
      <path d="M3 8 C45 15, 84 14, 112 8 S177 1, 217 8"></path>
    </svg>
  </span>
</a>

Accessibility decisions to keep

Do not replace the text with an SVG-only button or link. The wording should describe the destination or action, such as “Read the case study” or “View pricing,” rather than relying on the underline to communicate intent. A visible focus indicator is essential because keyboard users do not hover. The example uses :focus-visible so the link receives a clear outline during keyboard navigation without unnecessarily adding a strong ring to every pointer interaction.

The curved stroke should not be the only distinction between an ordinary link and an important action. Preserve sufficient text contrast, and do not make the animation the sole indication that a link is interactive. If the link opens a new window, downloads a file, or performs another unusual action, say so in the accessible label or nearby text.

There is no separate keyboard interaction to implement: a native anchor is reachable with the Tab key and activated with Enter. Avoid adding a positive tabindex, making the SVG focusable, or turning the link into a click-managed element when navigation is all that is required. Screen readers should encounter one useful link name, not a link followed by an unexplained graphic.

Reduced motion and fallback behavior

The prefers-reduced-motion rule removes the transition and leaves the underline visible. That is preferable to hiding the decorative cue entirely: people who request less motion still receive the same visual emphasis, just without the drawing effect. The static link text and browser focus behavior also remain useful if CSS fails to load.

For a design that needs a conventional fallback, add a standard text-decoration rule to the link and let the SVG be an enhancement. One option is text-decoration: underline; with an appropriate thickness and offset. If both the native underline and the SVG are used, check that they do not overlap or create a visually noisy double line.

Rendering and performance considerations

This is a small, single-path effect, so its cost should generally be lower than a complex illustration with many animated nodes. That is directional guidance, not a measured performance result for every browser or device. Keep the SVG limited to the path needed for the underline, avoid filters and large embedded artwork, and do not place dozens of continuously animated links on one page.

A hover-and-focus transition is also less demanding than an infinite idle loop because it runs only during an interaction. Animating the stroke dash can still trigger SVG painting, so test the complete page on the devices and browsers that matter to your audience. Inspect the effect at different zoom levels and with long translated labels: clipping, overlap, and unexpected line breaks are more likely practical problems than the curve itself.

When to use it

Use this treatment when the link is part of a calm visual system and needs a little emphasis without the rectangular affordance of a conventional CTA button. It is a good fit for “learn more,” editorial navigation, portfolio work, or a secondary action beside a primary button.

Choose a real button when the control changes state, opens a dialog, submits data, or performs an in-page action. A text link should remain a link. Likewise, avoid applying the same animated underline to every link on a page: reserve it for a meaningful hierarchy so the motion and accent retain their purpose.

Implementation checklist

• Use a native anchor with descriptive visible text.
• Keep the SVG decorative with aria-hidden and pointer-events: none.
• Provide a visible :focus-visible style for keyboard navigation.
• Respect prefers-reduced-motion: reduce by removing the transition.
• Keep a static underline or other non-animated cue available as a fallback.
• Check contrast, zoom, localization, line wrapping, and touch behavior before release.

For background on SVG structure, consult the MDN SVG tutorial. The MDN prefers-reduced-motion reference explains the media query used here, while the W3C guidance on animation from interactions provides accessibility context. For broader rendering guidance, see the web.dev animations guide.