Gradientes e padrões

defs guarda gradientes e padrões. Você referencia com fill="url(#id)".

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Onde declarar um linearGradient?
• stop-color pinta o quê?
• patternUnits userSpaceOnUse mede em quê?

Céu em degradê

A referência mistura céu, grade sutil e sol. Tudo reutiliza defs.

Erro comum: criar dois ids iguais — o segundo sobrescreve de forma confusa.

Trocar o sol

Mude a cor do círculo do sol ou um stop do gradiente.

<linearGradient id="ceu" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#1b3a5a"/>
</linearGradient>

Pare e experimente. Uma mudança por vez.

Reuso

O mesmo gradiente pode pintar vários retângulos depois.

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne index.html, styles.css. Abra o resultado pronto, localize o trecho que produz gradientes e padroes e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

1. defs serve para quê?
2. Como aplicar o gradiente ceu?
3. pattern desenha o quê neste exemplo?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Definir recursos reutilizáveis.

Atividade 2. fill="url(#ceu)".

Atividade 3. Uma grade leve por cima do céu.

Exemplo deste capítulo: pacote de exemplos/05-gradientes/.