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. ![jarra vazia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv0zzwenqe3uuiidl4sh.png) 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. ![jarra com líquido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzw85k95i2reflsi2pks.jpg) Vou deixar meu SVG base abaixo pra quem quiser reproduzir: ``` ``` 2) Logo antes do primeiro `` é 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](https://www.shapedivider.app/) e [Haikei](https://haikei.app/). Se você não está acostumado a trabalhar com SVG, os sites devem te dar um svg parecido com esse aqui: ``` ``` 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: ``` ``` ![jarra com svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucfz8r1zvwlgjjpgqvx9.jpg) 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 `` 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) 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 ``. 5) Chegou a hora de inserir em um [keyframe](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) 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!

ovatsugbp

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

Join Our Newsletter. No Spam, Only the good stuff.