SVG Marching Ants

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG.

See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen.
Let’s break it apart bit by bit and see all the little parts come together.
Step 1: Draw a dang rectangle
We can set up our SVG like a square, but have the aspect ratio ignored and have it flex into whatever rectangle we’d like.

<rect width=’40’ …
The post SVG Marching Ants appeared first on CSS-Tricks.

Link: https://css-tricks.com/svg-marching-ants/