---
title: "Animated Dashed Border"
url: "https://sanyam.sh/lab/animated-dashed-border"
date: "2026-02-21"
---

# Animated Dashed Border

an SVG-based animated dashed border that appears on hover. the dashes march around the border continuously using `stroke-dashoffset` animation.

key insight: using an SVG `path` starting from the middle of the top edge instead of a corner hides the animation seam. `vectorEffect='non-scaling-stroke'` keeps stroke width consistent regardless of container size. `preserveAspectRatio='none'` stretches the path to fit any aspect ratio.

the path is drawn clockwise from center-top, through all four rounded corners using arc commands (`A`). CSS keyframes animate `stroke-dashoffset` from 0 to -14 (dash + gap sum) creating the marching effect. `group-hover` triggers opacity fade-in for smooth appearance.

- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/animated-dashed-border/index.tsx