Este tipo de trucos de animación SVG + CSS es un truco para mí. Mikael Ainalem comparte cómo dibujar un ícono de hamburguesa (las “tres líneas” con las que estás familiarizado), pero luego animarlo de una manera sorprendente y divertida al controlar las propiedades SVG en CSS.
El truco es que las líneas superior e inferior no son solo una línea recta. <line /> pero un <path /> que se curva hacia arriba, hacia abajo y alrededor formando la cruz. Solo puede ver parte de la línea (haciendo que parezca recta al principio) porque el stroke-dasharray solo revela parte de la línea. Luego, animando tanto el stroke-dasharray y stroke-dashoffset, se forma el ✕.
Enlace directo →