Gerador de Blob SVG

Blob shapes em SVG: decoração orgânica para interfaces modernas

Um blob é uma forma irregular, fluida e orgânica que virou um dos elementos visuais marcantes do revival Memphis no web design entre 2018 e 2020. Aparece em todo lugar — fundos de hero, decoração de cards, divisores de seção, silhuetas de mascotes — porque traz um calor de desenho à mão que formas geométricas (círculos, retângulos, polígonos) simplesmente não conseguem. Praticamente todo blob na web é um único <path> SVG gerado proceduralmente e depois exportado como markup inline ou data URI.

Como o algoritmo funciona

A receita é curta. Escolha de 6 a 10 pontos âncora em ângulos uniformes em torno de um centro, perturbe cada raio com ruído e conecte as âncoras com curvas de Bézier cúbicas cujos pontos de controle são tangentes a um círculo daquele raio. A regra prática é colocar cada ponto de controle a aproximadamente raio * 0.33 ao longo da tangente — isso dá a curvatura mais suave sem achatar a forma. Repita com outra semente aleatória e você tem um blob novo a cada execução.

<svg viewBox="0 0 200 200">
  <path d="M120,30 C160,40 180,90 170,130
            C160,170 100,180 60,160
            C20,140 10,90 30,60 C50,30 90,20 120,30 Z"
        fill="#3b82f6"/>
</svg>

Ferramentas e bibliotecas

• Blobmaker da Z Creative Labs — sliders de complexidade e aleatoriedade.
• getwaves.io — focada em ondas/divisores entre seções.
• Haikei — combina blobs, gradientes, rabiscos e grids isométricos.
• LottieFiles — milhares de mascotes blob animados prontos para usar.

SVG vs CSS vs PNG

Um blob é uma curva irregular e, portanto, impossível de desenhar só com funções de shape do CSS — você precisa de um SVG path ou de um raster. SVG vence em tamanho e escalabilidade: um blob 200x200 tem cerca de 200 bytes; o mesmo blob em PNG fica entre 5 e 20 KB. SVG também aceita <linearGradient> e <radialGradient>, melhorando muito a estética. O Tailwind v3+ permite jogar um blob direto numa classe: bg-[url('data:image/svg+xml;...')].

Animando blobs

Dois caminhos com bom suporte: animar o atributo d com @keyframes CSS (Chromium e Firefox 100+ interpolam d quando os dois paths têm a mesma estrutura de comandos) ou usar JavaScript para regerar o path a cada requestAnimationFrame. Para animação cross-platform, exportar um Lottie JSON do After Effects entrega a melhor fidelidade. A abordagem legada com <animate> SMIL ainda funciona, mas está deprecada no Chromium.

Perguntas frequentes

Por que blobs estão em tudo agora? Surgiram com o revival Memphis em 2018 e ficaram porque trazem calor orgânico para UIs geométricas. Funcionam bem em qualquer paleta, ficam atrás de textos sem competir, e renderizam em impressão e dark mode sem artefatos.

Como SVG se compara ao PNG em performance? Um blob SVG inline é tipicamente 5 a 30x menor do que o PNG equivalente, nítido em qualquer resolução e parseia em microssegundos. A única vantagem do PNG são efeitos de filtro intricados que em SVG exigiriam passes caros de feGaussianBlur.

Posso animar um blob? Pode — keyframes CSS no atributo d, JavaScript regerando o path a cada frame, ou Lottie JSON para movimentos desenhados por designer. Mantenha a lista de comandos idêntica entre os estados para o navegador interpolar com suavidade.

Blobs precisam ser acessíveis? Blobs puramente decorativos devem ter aria-hidden="true" para que leitores de tela os ignorem. Se o blob carrega significado (logotipo, botão interativo), envolva com labels ARIA apropriadas.