Gerador de Blobs SVG

Crie Belos Blobs SVG em Segundos

As formas orgânicas tipo "blob" são uma das tendências mais populares do design web moderno — aparecem como fundos hero, divisores de seção, acentos decorativos em cartões e até mesmo como ícones de aplicativos. Este Gerador de Blobs SVG permite criar blobs únicos e perfeitamente suaves com alguns controles deslizantes, e depois copiar o SVG ou baixá-lo para usar em qualquer projeto.

Como o Blob é Construído

O gerador posiciona vários pontos de ancoragem uniformemente ao redor de um círculo, em seguida desloca o raio de cada ponto em uma quantidade aleatória baseada no valor de aleatoriedade selecionado. Os pontos são conectados em uma curva fechada e suave usando segmentos cúbicos de Bézier derivados de uma spline Catmull–Rom, o que garante um contorno limpo e contínuo sem cantos visíveis — não importa quão caóticos sejam os pontos subjacentes.

Uma semente determinística controla cada decisão aleatória, o que significa que a mesma configuração sempre produz exatamente o mesmo blob. Clique em rerrolar para percorrer novas formas sem alterar mais nada.

Opções de Personalização

• Complexidade — número de pontos de ancoragem (3 a 20). Valores baixos geram blobs suaves e arredondados. Valores altos produzem contornos complexos e ondulados.
• Aleatoriedade — quanto cada ponto pode desviar do raio base. Zero produz um círculo; aleatoriedade máxima dá formas orgânicas impressionantes.
• Semente — inteiro que torna cada resultado reproduzível. Com a mesma semente, você sempre obtém a mesma forma.
• Preenchimento — escolha uma cor sólida ou um gradiente linear de duas paradas com ângulo ajustável.
• Contorno — traço opcional com cor e espessura configuráveis.

Formatos de Saída

O gerador produz marcação SVG limpa e mínima que você pode colar diretamente em um documento HTML, componente React, arquivo Figma ou qualquer ferramenta de design que aceite SVG. Copie o código para a área de transferência com um clique ou baixe a forma como um arquivo .svg independente.

Usos Comuns

• Fundos hero e acentos em landing pages
• Máscaras de imagem estilo avatar
• Formas decorativas atrás de cartões de recursos
• Emblemas abstratos e elementos de UI estilo adesivo
• Transições em blob entre seções de página
• Decoração de slides de apresentação

Como a saída é SVG puro, ela escala com nitidez em qualquer resolução, tem tamanho de arquivo mínimo e pode ser animada com CSS ou JavaScript. Você também pode editar o caminho resultante em ferramentas como Illustrator, Figma ou Inkscape se precisar de ajustes adicionais.