Como gerar uma forma de blob SVG aleatória
Publicado em 15 de setembro de 2026 · 2 min de leitura
Aquelas formas de blob suaves e orgânicas por trás de seções hero e ilustrações não são desenhadas à mão — são geradas a partir de pontos aleatorizados conectados com uma curva suave. Esta ferramenta constrói uma a partir de um valor semente, então a mesma semente sempre reproduz a mesma forma.
Experimentar Gerador de blobs SVGPassos
- 1
Abra o Gerador de blob SVG
Acesse o gerador de blob.
- 2
Defina os pontos de ancoragem e aleatoriedade
Mais pontos criam formas mais complexas; maior aleatoriedade cria contornos mais irregulares e orgânicos.
- 3
Escolha uma semente e cor
A semente determina a forma exata — mude-a para um novo blob, ou mantenha-a para reproduzir o mesmo depois.
- 4
Copie o SVG
Use a marcação gerada diretamente no seu HTML ou ferramenta de design.
Perguntas frequentes
Sim — o gerador é totalmente determinístico, então uma semente e contagem de pontos dadas sempre reproduzem exatamente o mesmo blob, útil se você quiser recriar uma forma que gostou depois.
Os pontos aleatorizados são conectados usando um spline Catmull-Rom convertido em curvas Bezier cúbicas suaves, que é o que dá ao blob seu contorno orgânico e arredondado em vez de ângulos afiados.
Sim — esse é um caso de uso comum; copie o SVG e posicione-o atrás do seu conteúdo com CSS, ajustando a cor de preenchimento para combinar com seu design.
Como a forma é marcação SVG real e editável — não uma imagem — ela escala perfeitamente para qualquer tamanho sem nenhuma perda de qualidade.