Como eu fiz uma animação de líquido só com CSS em 5 minutos

Esse artigo nasce depois de, mais uma vez, passar mais tempo buscando uma solução do que propriamente codando, vim aqui deixar minha colaboração pra tentar ajudar quem está passando pelo mesmo.

Uma jarra parecida com a que vocês veem logo aqui embaixo foi me passada, pela equipe de Design, em SVG e era uma figura central em uma página de erro, e pra deixar apágina com um pouco mais de movimento (visto que nenhuma ação muito grande aconteceria ali), resolvi fazer uma animação de um líquido com CSS.

A solução simples que proponho a vocês é feita em apenas 4 passos e os descrevo agora abaixo.

1) Você precisa, primeiramente, preparar seu arquivo HTML para receber sua animação. No meu caso, eu queria colocar a animação dentro de uma jarra então o SVG foi colocado ali dentro mesmo, essa era minha base para eu conseguir fazer a manipulação via CSS mais adiante.

Vou deixar meu SVG base abaixo pra quem quiser reproduzir:

<svg
      width="227"
      height="188"
      viewBox="0 0 227 188"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M160 78.5H39L39.0002 171.56C39.0002 176.21 42.7702 179.97 47.4102 179.97H151.58C156.23 179.97 159.99 176.2 159.99 171.56V121H160L160 78.5Z"
        fill="#ff6a6a"
      />
      <path
        d="M166.341 150.52H202.061C207.271 150.52 211.681 146.62 212.321 141.45L225.591 34.1C225.951 31.16 225.041 28.2 223.081 25.98C221.121 23.76 218.291 22.49 215.331 22.49H166.341V42.49H198.141C199.731 42.49 201.241 43.17 202.291 44.36C203.341 45.55 203.831 47.13 203.641 48.71L194.131 125.66C193.791 128.43 191.421 130.52 188.631 130.52H166.351V150.52H166.341Z"
        stroke="#003503"
        stroke-miterlimit="10"
      />
      <path
        d="M9.9908 23.65C5.7808 23.65 2.0808 20.66 1.2008 16.53C0.700805 14.18 1.14081 11.77 2.4508 9.76C3.7608 7.74 5.7708 6.35 8.1208 5.85L32.1808 0.7C32.8008 0.57 33.4308 0.5 34.0608 0.5H164.331C169.291 0.5 173.331 4.54 173.331 9.5C173.331 14.46 169.291 18.5 164.331 18.5H35.0208L11.8808 23.45C11.2608 23.58 10.6208 23.65 9.9908 23.65Z"
        stroke="#003503"
        stroke-miterlimit="10"
      />
      <path
        d="M164.341 18.5H35.0208L14.3008 22.93L28.8808 41.04C30.9408 43.57 32.0708 46.76 32.0708 50.02V174.12C32.0708 181.25 37.8708 187.06 45.0108 187.06H153.411C160.541 187.06 166.351 181.26 166.351 174.12V18.27C165.711 18.42 165.041 18.5 164.351 18.5H164.341Z"
        stroke="#003503"
        stroke-miterlimit="10"
      />
    </svg>

2) Logo antes do primeiro <path> é onde a mágica acontece, você irá inserir ali um svg no formato desejado com ajuda de um gerador de SVG's. Sugiro duas plataformas onde vocês conseguem isso fácil, fácil: ShapeDivider e Haikei.

Se você não está acostumado a trabalhar com SVG, os sites devem te dar um svg parecido com esse aqui:

<svg
      id="visual"
      viewBox="0 0 675 900"
      width="675"
      height="900"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
    >
      <rect x="0" y="0" width="675" height="900" fill="#002233"></rect>
      <path
        d="M0 602L16 612C32 622 64 642 96.2 635.8C128.3 629.7 160.7 597.3 192.8 606.7C225 616 257 667 289.2 692.8C321.3 718.7 353.7 719.3 385.8 719.5C418 719.7 450 719.3 482.2 729.5C514.3 739.7 546.7 760.3 578.8 762.7C611 765 643 749 659 741L675 733L675 901L659 901C643 901 611 901 578.8 901C546.7 901 514.3 901 482.2 901C450 901 418 901 385.8 901C353.7 901 321.3 901 289.2 901C257 901 225 901 192.8 901C160.7 901 128.3 901 96.2 901C64 901 32 901 16 901L0 901Z"
        fill="#0066FF"
        stroke-linecap="round"
        stroke-linejoin="miter"
      ></path>
    </svg>

Caso você estiver trabalhando dentro de um svg já, como eu, você não precisa disso tudo de código então você pode limpar um pouco e deixar só o path e vai ficar algo mais ou menos assim:

        <path
        class="liquid"
        d="M0 602L16 612C32 622 64 642 96.2 635.8C128.3 629.7 160.7 597.3 192.8 606.7C225 616 257 667 289.2 692.8C321.3 718.7 353.7 719.3 385.8 719.5C418 719.7 450 719.3 482.2 729.5C514.3 739.7 546.7 760.3 578.8 762.7C611 765 643 749 659 741L675 733L675 901L659 901C643 901 611 901 578.8 901C546.7 901 514.3 901 482.2 901C450 901 418 901 385.8 901C353.7 901 321.3 901 289.2 901C257 901 225 901 192.8 901C160.7 901 128.3 901 96.2 901C64 901 32 901 16 901L0 901Z"
        fill="#0066FF"
        stroke-linecap="round"
        stroke-linejoin="miter"
      ></path>

Depois de inserir, grandes chances de não estar posicionado como você queria, então muito provavelmente você irá precisar ajustar o posicionamento do SVG via CSS mesmo. Eu adicionei ao <path> a classe liquid pra conseguir fazer os ajustes a partir dela.

3) Com a classe configurada, você irá no seu arquivo de estilos e aplicar regra css animation que ao atribuir um nome, uma duração, um tipo de animação e um delay já é possível fazer uma animação básica e funcional. Se você nunca usou animation antes você pode consultar no MDN mais detalhes.

4) Após isso, iremos gerar mais alguns SVG's pelo mesmo app que usamos acima, eu gerei 4, e copiar **somente **o atributo d="" dentro do <path>.

5) Chegou a hora de inserir em um keyframe o passo a passo que nossa animação irá percorer. Para isso eu usei valores percentuais que vão dizer nessa escala qual caminho minha animação irá percorrer. Dentro de cada valor percentual você irá substituir o valor do atributo d="" configurado acima com um valor novo, obtido através do gerador. O código CSS final deve ficar com algo parecido com o código abaixo:

.water {
  animation: liquid 5s linear infinite;
}
@keyframes liquid {
    0% {
        d: path("M0 18L2.8 18.2C5.7 18.3 11.3 18.7 17.2 19.8C23 21 29 23 34.8 24C40.7 25 46.3 25 52 24.5C57.7 24 63.3 23 69 23C74.7 23 80.3 24 86.2 25.2C92 26.3 98 27.7 103.8 28.5C109.7 29.3 115.3 29.7 118.2 29.8L121 30L121 41L118.2 41C115.3 41 109.7 41 103.8 41C98 41 92 41 86.2 41C80.3 41 74.7 41 69 41C63.3 41 57.7 41 52 41C46.3 41 40.7 41 34.8 41C29 41 23 41 17.2 41C11.3 41 5.7 41 2.8 41L0 41Z");
    }
    25% {
        d: path("M0 27L2.8 27.7C5.7 28.3 11.3 29.7 17.2 29.8C23 30 29 29 34.8 29C40.7 29 46.3 30 52 30.7C57.7 31.3 63.3 31.7 69 30.2C74.7 28.7 80.3 25.3 86.2 24.5C92 23.7 98 25.3 103.8 26C109.7 26.7 115.3 26.3 118.2 26.2L121 26L121 41L118.2 41C115.3 41 109.7 41 103.8 41C98 41 92 41 86.2 41C80.3 41 74.7 41 69 41C63.3 41 57.7 41 52 41C46.3 41 40.7 41 34.8 41C29 41 23 41 17.2 41C11.3 41 5.7 41 2.8 41L0 41Z")
    }
    50% {
        d: path("M0 29L2.8 29.5C5.7 30 11.3 31 17.2 29.2C23 27.3 29 22.7 34.8 20.3C40.7 18 46.3 18 52 19C57.7 20 63.3 22 69 23.5C74.7 25 80.3 26 86.2 25.3C92 24.7 98 22.3 103.8 22.2C109.7 22 115.3 24 118.2 25L121 26L121 41L118.2 41C115.3 41 109.7 41 103.8 41C98 41 92 41 86.2 41C80.3 41 74.7 41 69 41C63.3 41 57.7 41 52 41C46.3 41 40.7 41 34.8 41C29 41 23 41 17.2 41C11.3 41 5.7 41 2.8 41L0 41Z");
    }
    75% {
        d: path("M0 30L2.8 29C5.7 28 11.3 26 17.2 25.2C23 24.3 29 24.7 34.8 25.5C40.7 26.3 46.3 27.7 52 28.5C57.7 29.3 63.3 29.7 69 28.5C74.7 27.3 80.3 24.7 86.2 23.5C92 22.3 98 22.7 103.8 23C109.7 23.3 115.3 23.7 118.2 23.8L121 24L121 41L118.2 41C115.3 41 109.7 41 103.8 41C98 41 92 41 86.2 41C80.3 41 74.7 41 69 41C63.3 41 57.7 41 52 41C46.3 41 40.7 41 34.8 41C29 41 23 41 17.2 41C11.3 41 5.7 41 2.8 41L0 41Z");
    }
    100% {
        d: path("M0 18L2.8 18.2C5.7 18.3 11.3 18.7 17.2 19.8C23 21 29 23 34.8 24C40.7 25 46.3 25 52 24.5C57.7 24 63.3 23 69 23C74.7 23 80.3 24 86.2 25.2C92 26.3 98 27.7 103.8 28.5C109.7 29.3 115.3 29.7 118.2 29.8L121 30L121 41L118.2 41C115.3 41 109.7 41 103.8 41C98 41 92 41 86.2 41C80.3 41 74.7 41 69 41C63.3 41 57.7 41 52 41C46.3 41 40.7 41 34.8 41C29 41 23 41 17.2 41C11.3 41 5.7 41 2.8 41L0 41Z");
    }
}

Bom, pessoal é isso! Acharam fácil? Conseguiram reproduzir? Esse artigo te ajudou de alguma forma? Comenta aí que vou adorar saber se consegui te ajudar. Se tiver alguma dúvida também pode colocar nos comentários que assim que eu puder, eu respondo. Até a próxima!