FIAT logo

FIAT (Fabbrica Italiana Automobili Torino) is one of the brands of Stellantis, one of the largest car manufacturers in the world, with headquarters in the city of Turin, northern Italy. The company Fiat Automobiles S.p.A. was formed in January 2007 when Fiat reorganized its business... Wikipedia

This is a small animation project of the Fiat logo, using HTML, CSS and JavaScript. To insert the SVG directly into the HTML page, the SVGInject library was used.

About the SVGInject Library

SVGInject is a JavaScript library that lets you insert SVGs directly into the HTML DOM and manipulate them using CSS and JavaScript. It's a great choice for projects that use a lot of SVGs and want to animate them simply and efficiently.

How to Test the Project

Download the project from the repository. Open the index.html file in your preferred browser.

Animações criadas

Foram utilizadas várias animações para animar o logo da Fiat. As propriedades do SVG foram manipuladas usando CSS, e a biblioteca SVGInject abaixo está uma breve descrição de cada uma das animações utilizadas:

• spin: animação que faz o logo da Fiat girar, alternando sua escala e opacidade em diferentes etapas.
• spinLettrs: animação semelhante à anterior, mas aplicada às letras do logotipo.
• rotateStar: animação que faz uma estrela girar e desaparecer gradativamente.
• rotateChrome: animação que faz o logotipo do Chrome girar e desaparecer gradativamente.
• redBackgroundScale: animação que faz um fundo vermelho escalar e girar em diferentes etapas.
• dash: animação que faz uma linha traçada aparecer gradativamente e desaparecer.

Technologies used

• HTML
• CSS
• JavaScript
• SVGInject
• SVG

How to Test the Project

Clone this repository on local machine, then open terminal on your computer and type

    git clone https://github.com/GomidesTs/soon-fiat.git

Open the index.html file in your preferred browser.

See debply at FIAT logo animated