Gerador SVG Blob Animado CSS

Blobs SVG animados em CSS: formas orgânicas morfando em UIs modernas

Um blob animado é uma forma orgânica SVG que se transforma suavemente ao longo do tempo e aparece em todo design web moderno — homepage da Stripe, Hotjar, Notion, landing pages do Linear. A construção básica é um <path> SVG montado com curvas Bézier cúbicas mais uma animação CSS. O detalhe: o atributo d do SVG não é diretamente animável em CSS puro. A Web Animations API e bibliotecas JavaScript são a solução moderna.

Animar o atributo d: opções reais

Três abordagens legítimas, ranqueadas por suporte de browser e tradeoffs:

• SMIL <animate>: funciona em Chrome, Firefox, Safari mas foi depreciado pelo Chrome (2015) e depois "des-depreciado" (2016). Ainda funcional, não mais recomendado.
• Web Animations API + JS: o caminho compatível com o padrão — element.animate([{ d: "path(...)" }]). Exige JS mas sem dep externa.
• GSAP MorphSVG (Premium comercial da GreenSock) ou anime.js morphSVG / Flubber.js (Mike Bostock, grátis): interpolação production-grade entre dois path strings quaisquer.

Workaround em CSS puro: fake morph com transform

Se você não pode usar JS, o truque é animar transform: rotate/scale num blob estático — a sensação orgânica vem das curvas assimétricas combinadas com rotação. Empilhe 2-3 blobs SVG e anime opacidade/posição para fingir um morph real:

@keyframes blob-morph {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(120deg) scale(1.1); }
  66%  { transform: rotate(240deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.blob { animation: blob-morph 8s ease-in-out infinite; }

Performance, acessibilidade e prefers-reduced-motion

Transforms são compostos pela GPU, então um par de blobs a 60 FPS roda tranquilo. Mantenha o budget de 1-2 blobs por página — mais que isso causa paint thrashing em celulares medianos. Por acessibilidade, marque blobs decorativos como aria-hidden="true" e respeite sempre prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

Ferramentas, geradores e tendências

Geradores populares de blob: Haikei (haikei.app — backgrounds e blobs), Blobs.app, SVG Blob Animator, Get Waves. Tendências atuais: blobs com gradiente (azul→roxo), mesh gradients, sobreposições glassmorphism. Variáveis CSS para tematização: --blob-color: #f0a. Integração Tailwind via valores arbitrários: bg-[url(...)] funciona inline. Elementos <stop> animados dentro de <linearGradient> permitem animar o próprio gradiente (SMIL ou WAAPI).

Perguntas frequentes

Consigo animar o atributo d com CSS puro? Não — d não é uma propriedade CSS-animável. Use a Web Animations API em JS, GSAP ou SMIL <animate>. O workaround em CSS puro é animar transforms num blob estático.

Devo respeitar prefers-reduced-motion? Sempre. Usuários com transtornos vestibulares podem ter enjoo com formas grandes morfando — desative a animação na media query de reduced-motion.

Posso animar cores do gradiente? Sim — anime stop-color em elementos <stop> via SMIL, ou use a WAAPI em custom properties CSS registradas com @property para transições suaves de gradiente.

GSAP MorphSVG é grátis? Não — exige assinatura do GreenSock Club. Alternativas gratuitas incluem Flubber.js (Mike Bostock) e o helper morphTo do anime.js para interpolar entre dois paths.