Blob Morph

Uma forma vetorial se transforma suavemente em outra.

Adicione um "Shape Morph" (também chamado path morphing ou SVG morph) em [onde].
Uma forma deve se transformar suavemente em outra, por exemplo um pentágono que se afina até virar uma estrela, com os pontos deslizando para o lugar em ritmo uniforme e sem pressa.
Dê às duas formas o mesmo número de pontos correspondentes para a transformação ficar limpa e sem cintilação, e reproduza uma vez a cada mudança de estado em vez de em loop.

Formas próximas se fundem como gotas líquidas por meio de um filtro de desfoque e contraste.

Adicione um "Gooey Effect" (também chamado goo effect ou metaballs) em [onde].
Com o ponteiro por cima, pequenas gotas devem se afastar da forma principal, esticando como líquido antes de se soltar, e voltar fluindo para se fundir suavemente quando o ponteiro sair.
Aplique o filtro de desfoque e contraste só ao pequeno grupo de formas, não à página inteira, e mostre o mesmo efeito no foco do teclado e ao tocar.

Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.

Adicione um "Icon Morph" (também chamado hamburger to X ou menu icon morph) em [onde].
A cada toque, as barras de cima e de baixo devem primeiro deslizar juntas até o meio e depois girar formando um X enquanto a barra do meio some; tocar de novo inverte o movimento: rápido e ágil.
Faça dele um botão de alternância de verdade, com rótulo acessível e estado expandido que mudem junto, e mantenha o tamanho do ícone fixo para nada ao redor se deslocar.

Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.

Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).