Line-Animated Hamburger Menu

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.

CodePen Embed Fallback

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. … Read article “Line-Animated Hamburger Menu”

The post Line-Animated Hamburger Menu appeared first on CSS-Tricks.