Curso de Vetores e Animação com SVG: Trabalhando com CSS e JavaScript

Faça esse curso de HTML e CSS e:

• Entenda passo-a-passo como uma ilustração se transforma em código
• Veja como utilizar estes códigos em seus leiautes para web
• Adicione CSS para editar e animar suas ilustrações
• Aumente ainda mais as possibilidades de animação com bibliotecas em JavaScript
• Utilize os recursos do SVG para criar efeitos gráficos e filtros

Conteúdo Detalhado

1. Conhecendo o SVG e algumas ferramentas

   • O que é SVG
   • gerando SVGs
   • formas básicas do SVG
   • Trabalhando com coordenadas
   • A tag path
   • Sobre as letras no path
   • Importando SVGs
   • "XML NameSpaces" ou "xmlns"
   • Exportar SVGs do Illustrator

2. Começando a animação com CSS

   • Animando os caiaques
   • Animando as nuvens
   • Usando opções de "keyframe"
   • Animando o lettering
   • Animando o traçado
   • A propriedade `animation`
   • Finalizando o header
   • Entendendo o viewBox
   • Posicionamento com viewBox
   • Entendendo o viewPort
   • Loaders em SVG

3. Leiaute com CSS

   • Inserindo cards no HTML
   • Iniciando os estilos dos cards
   • Utilizando o FlexBox
   • Responsividade com flex
   • CSS FlexBox
   • Mais prática com o viewBox
   • Coordenadas ao contrário?
   • SVG Icons

4. Animação com JS e bibliotecas

   • Pegando eventos de tela com JS
   • Usando o addEventListener
   • O addEventListener()
   • Utilizando mais métodos JS com o DOM
   • Juntando JS e CSS
   • Utilizando valores variáveis no CSS
   • Trabalhando com classes, this e bind
   • Usando o "this" e o "bind"
   • Finalizando a animação com JS
   • Referenciando os ícones no JS
   • Trocar a animação dos cards
   • Utilizando bibliotecas externas
   • O que são CDNs?
   • Outras opções do TweenMax

5. Recursos de filtro e animação do SVG

   • Adicionando novos elementos ao projeto
   • Utilizando a tag defs
   • Aplicando filtros
   • Brincando com filtros
   • Sobre filtros de SVG
   • Efeitos de gradiente com SVG
   • Usando JS para animar filtros
   • Estilos e posicionamento no footer
   • Finalizando
   • SMIL e compatibilidade SVG