Paths
Marching Ants Animation
A dashed outline that crawls along the path.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.marching-dashes {
transform: translate3d(140px, 60px, 0);
width: 200px;
height: 200px;
background: #00000000;
stroke-width: 4;
stroke: #8b7bff;
stroke-dasharray: 10;
stroke-dashoffset: 0;
animation: marching-dashes-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes marching-dashes-anim {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -20;
}
}
@media (prefers-reduced-motion: reduce) {
.marching-dashes {
animation: none;
transition: none;
}
}Why it is built this way
The selection border from every design tool. The dash pattern stays fixed and only the offset moves, which is why one linear loop of exactly one dash period repeats seamlessly.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
strokeWhat it costs to run
Stroke repaints on every frame rather than running on the compositor. There is no reflow, so this is far cheaper than animating width or height — but keep the painted area modest.
It runs for 1.20s across 2 keyframe stops, with every property moving over the same window.
A single linear curve on a path. Linear looks wrong on almost anything that starts and stops — but it is exactly right here, because a continuous loop that eases would visibly stutter at the seam where it repeats.
Accessibility
Nothing here hides content — stroke moves over 1.20s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.