Na primeira parte, defino a grade e desenho as letras.
Para desenvolver a animação criei um arquivo HTML com sua estrutra básica, o chamei de index.html. Em determinado ponto também precisei criar um arquivo CSS, o chamei de index.css.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./index.css" /> <title>GOOD MOOD</title> </head> <body> <!-- o SVG entrará aqui --> </body></html>/* o CSS entrará aqui */Definindo a grade
Defini uma grade de 4 colunas e 2 fileiras. Enquanto as colunas têm largura fixa, as fileiras aumentam e diminuem de altura. Cada letra tem 10 unidades de largura e oscila entre 10 e 20 unidades de altura.
Quando uma letra no topo aumenta de altura, a letra abaixo diminui de altura, e vice-versa. Dessa forma, a soma das alturas das fileiras é sempre igual a 30 unidades.
As colunas e fileiras são separadas por 1 unidade de distância, e a animação tem margens de 10 unidades.
Sendo 4 colunas de 10 unidades de largura, com 1 unidade de distância entre elas, com margens de 10 unidades em cada lado, a largura total é de 63 unidades.
Sendo 2 fileiras onde a soma das alturas é sempre igual a 30 unidades, com 1 unidade de distância entre elas, com margens de 10 unidades no topo e fundo, a altura total é de 51 unidades.
O valor do atributo viewBox ficou assim:
<!-- x1 = 0 y1 = 0 x2 = 63 y2 = 51 --><svg viewBox="0 0 63 51"> <!-- demais elementos entrarão aqui --></svg>Desenhando as letras
Tendo a grade definida, segui para o desenho de cada letra em versões normal e esticada. Nas próximas seções mostro cada comando do atributo d do elemento path, assim como o resultado final contornado ou preenchido.
Nestas seções usei um viewBox que comporta apenas uma letra:
<svg viewBox="0 0 10 20" width="200"> <path d="os comandos entrarão aqui" /></svg>Omiti o elemento svg que se encontraria em volta do elemento path para manter o código conciso.
Primeira fileira
Desenhei as letras da primeira fileira no topo, com suas versões esticadas se esticando para baixo.
Letra G normal
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,4.6 L6,4.6 L6,4 C6,3 4,3 4,4 L4,6 C4,7 6,7 6,6 L5,6 L5,5 L10,5 L10,10 L7,10 L6.6,9 Q6,10 4,10 Q0,10 0,6z "/>Letra G esticada
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,14.6 L6,14.6 L6,4 C6,3 4,3 4,4 L4,16 C4,17 6,17 6,16 L5,16 L5,15 L10,15 L10,20 L7,20 L6.6,19 Q6,20 4,20 Q0,20 0,16z "/>Letra O normal
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,6 Q10,10 6,10 L4,10 Q0,10 0,6 L4,6 C4,7 6,7 6,6 L6,4 C6,3 4,3 4,4 L4,6 L0,6z "/>Letra O esticada
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,16 Q10,20 6,20 L4,20 Q0,20 0,16 L4,16 C4,17 6,17 6,16 L6,4 C6,3 4,3 4,4 L4,16 L0,16z "/>Letra D normal
<path d=" M0,0 L6,0 Q10,0 10,4 L10,6 Q10,10 6,10 L0,10 L0,7 L4,7 Q6,7 6,6 L6,4 Q6,3 4,3 L4,7 L0,7z "/>Letra D esticada
<path d=" M0,0 L6,0 Q10,0 10,4 L10,16 Q10,20 6,20 L0,20 L0,17 L4,17 Q6,17 6,16 L6,4 Q6,3 4,3 L4,17 L0,17z "/>Segunda fileira
Desenhei as letras da segunda fileira no fundo, com suas versões esticadas se esticando para cima.
Letra M normal
<path d=" M0,10 L4,10 L5,14 L6,10 L10,10 L10,20 L7,20 L7,15 L6,20 L4,20 L3,15 L3,20 L0,20z "/>Letra M esticada
<path d=" M0,0 L4,0 L5,6 L6,0 L10,0 L10,20 L7,20 L7,7 L6,20 L4,20 L3,7 L3,20 L0,20z "/>Letra O normal
<path d=" M0,14 Q0,10 4,10 L6,10 Q10,10 10,14 L10,16 Q10,20 6,20 L4,20 Q0,20 0,16 L4,16 C4,17 6,17 6,16 L6,14 C6,13 4,13 4,14 L4,16 L0,16z "/>Letra O esticada
É igual a letra O esticada da primeira fileira.
Letra D normal
<path d=" M0,10 L6,10 Q10,10 10,14 L10,16 Q10,20 6,20 L0,20 L0,17 L4,17 Q6,17 6,16 L6,14 Q6,13 4,13 L4,17 L0,17z "/>Letra D esticada
É igual a letra D esticada da primeira fileira.
Conclusão
Tendo a grade definida e as letras desenhadas em suas versões normal e esticada, segui para a animação: GOOD MOOD parte 2: animando as letras.