This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
The trick is that the top and bottom lines aren’t just a straight
<line /> but a
<path /> that curves up, down, and around forming the cross. You can only see part of the line (making it appear straight at first) because the
stroke-dasharray only reveals part of the line. Then, by animating both the
stroke-dashoffset, the ✕ is formed.