feb 21, 2026
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.