Skip to content

Latest commit

 

History

History
36 lines (24 loc) · 1.23 KB

desafio-10.md

File metadata and controls

36 lines (24 loc) · 1.23 KB

SVG

Esse desafio vai além de CSS, é pra te ensinar uma ferramenta ou melhor, uma opção incrível que o HTML. SVG nada mais são que tags, sim, tags, iguais a que usamos em HTML, porém o SVG é considerado um XML.

Já imaginou desenhar imagens só com tags? Sem canvas, sem png, sem jpeg. Puramente texto? É isso que eu adoro em SVG.

SVGs são muito usados em icones, e também em animações dentro de aplicações e sites.

Nesse desafio você trabalhará com

  • svg
  • animation
  • keyframes
  • transform
  • propriedades de css que funcionam somente com svg;

Regras

Só pode ser usado HTML e CSS

Requisitos

É necessaŕio que:

  • Utilize um icone svg que simbolize carregamento/loading, veja referência
  • Anime a borda desse icone
  • Anime a cor do icone
  • Se seu icone se encaixar com rotação, rotacione, senão utilize movimento em Y ou X.

Você pode visualizar o modelo que eu fiz no CodePen

Referências

Você pode utilizar os sites FlatIcon ou Icon8.

Se não se sentir a vontade para escolher um icone, você pode utilizar o icone que eu usei