Voiture SVG et animations CSS CSS22

Cet exercice consiste à reconstruire un décor avec des éléments fournies au format SVG, puis d’en faire l’animation via CSS.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Consignes de l’exercice

Téléchargez les fichiers nécessaires pour effectuer l’exercice ci-dessous :

Vous pouvez effectuer cet exercice en suivant deux méthodes différentes… Choisissez donc bien les fichiers correspondant à la méthode que vous souhaitez utiliser.

Construisez une page web contenant l’illustration SVG avec la méthode de votre choix :

  • Méthode 1 : Vous pouvez partir d’un fichier unique .ai ou .svg.
  • Méthode 2 : Vous pouvez démarrer à partir de morceaux d’images décomposés dans des fichiers .ai ou .svg séparés.

Gérer les animations des différents éléments pour obtenir un résultat sensiblement identique à l’exemple ci-dessous :

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez une copie de votre animation et effectuer les modifications nécessaires afin d’obtenir le résultat ci-dessous. Cliquez pour relancer l’animation.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.