Animer un bouton burger simple avec SVG et CSS

Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes.

Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce tutoriel, nous allons suivre étape par étape comment animer un bouton burger simple avec SVG et CSS.

Quels outils ?

La liste des outils nécessaires pour atteindre nos objectifs est particulièrement réduite puisqu'un simple éditeur de code fait le job (n'importe lequel fait l'affaire, Visual Studio Code étant mon choix personnel).

Pour aller plus loin, et en guise de bonus, on peut également piocher :

• Un éditeur SVG en ligne (parce que ça peut toujours servir)
• Des recommendations concernant l'accessibilité des SVG (au hasard les Guidelines Alsacréations)
• Un éditeur de courbes de Bezier (pour des animations originales)

SVG c'est quoi ?

En trois mots, voici comment résumer SVG :

• SVG est un format graphique vectoriel (composé de tracés et de courbes)
• Il est développé et maintenu depuis 1999 par le W3C (standard officiel, open source)
• Il est conçu en XML (compatible HTML) (on peut le créer et le lire avec un simple éditeur de texte)

1. Produire le burger bouton en SVG

Si l'on y regarde de plus près, une "icône Burger" c'est bêtement trois rectangles horizontaux espacés et avec des coins arrondis.

Notre éditeur de code préféré est amplement suffisant pour s'aquitter de la tâche de des...
[Courte citation de 8% de l'article original]