Marching ants

The drawing is a dashed stroke around whatever is selected, and the animation is the dash pattern sliding along that stroke: shift the offset by exactly one full dash plus one full gap and the pattern lands back on itself, so the loop has no seam and the dashes appear to walk around the perimeter forever. Every implementation is a version of that one idea. A canvas app animates lineDashOffset, an SVG outline animates stroke-dashoffset, and a plain HTML box does it with a repeating gradient whose background position travels. The border itself never moves; only the pattern painted along it does.

The name comes from the era that made the effect famous. MacPaint shipped a moving dashed marquee in 1984 and Photoshop made it the universal sign of a selection, and users named the crawling dashes after the insects they look like. Motion is doing real work there, not decoration. A dashed rectangle is one of the most common decorative borders in software, so a still one says nothing in particular, while a moving one can only mean that the application is holding this region and waiting for the next command. It is the rare case where an animation carries state that no static treatment carries, which is why the effect has survived four decades of otherwise total visual turnover.

Three details separate a good one from a distracting one. Speed: slow, in the range of twenty to forty pixels a second, because faster reads as an error state and the ants should sit under the work rather than pull the eye off it. Contrast: the classic alternates dark and light dashes rather than using one colour, so the boundary survives being drawn over a black photograph and a white page in the same document. Direction: the crawl should circulate around the perimeter, all four edges agreeing, since dashes travelling in contradictory directions read as four separate animations rather than one boundary. In a browser the animation also has to answer prefers-reduced-motion, and the correct answer is to rest the dashes rather than delete the outline: the boundary is information and only the walking is decoration.

Marching ants is the outline; the gesture that draws it is usually a lasso selection or a rectangular drag. Graphics tools call that rectangle a marquee, which is worth keeping straight from marquee as the web uses the word, a strip of continuously scrolling content. Both scroll something forever, and that is where the resemblance ends.