Diese Art von SVG + CSS-Animation ist für mich unwiderstehlich. Mikael Ainalem teilt mit, wie man ein Hamburger-Symbol zeichnet (dieses Ding mit den "drei Linien", das Sie sehr gut kennen), und es dann auf überraschende und unterhaltsame Weise animiert, indem die SVG-Eigenschaften in CSS gesteuert werden.
Der Trick besteht darin, dass die oberen und unteren Linien keine geraden <line /> sind, sondern ein <path />, der sich nach oben, unten und herum krümmt und so das Kreuz bildet. Man sieht nur einen Teil der Linie (wodurch sie zunächst gerade erscheint), weil das stroke-dasharray nur einen Teil der Linie offenbart. Durch die Animation von sowohl stroke-dasharray als auch stroke-dashoffset wird das ✕ gebildet.