Gerador de blobs SVG

O que é Gerador de blobs SVG?

O Gerador de blobs SVG é uma ferramenta gratuita no navegador para designers e desenvolvedores front-end que querem formas blob suaves e orgânicas para planos de fundo, seções hero, avatares ou detalhes decorativos sem desenhá-las à mão. Você controla dois valores: a complexidade (o número de pontos de ancoragem ao redor da forma) e o contraste (o quanto cada ponto se afasta de um círculo perfeito). Uma semente no estado, incrementada pelo botão Regenerar, permite percorrer variações infinitas mantendo a complexidade e o contraste fixos. A saída é renderizada como um único traçado de Bézier fechado e suave, então você pode copiar uma marcação SVG limpa, obter uma regra CSS clip-path() para mascarar qualquer elemento ou baixar um arquivo .svg pronto para usar. Use-o para criar decorações alinhadas à marca rapidamente ou para aprender como os traçados de blob são construídos a partir de pontos ao redor de um círculo.

Como usar Gerador de blobs SVG

1. Abra as Configurações e defina a complexidade (número de pontos, 3-16) da forma.
2. Defina o contraste (0-100) para controlar quão irregulares e onduladas são as bordas.
3. Escolha uma cor de preenchimento com a amostra de cor ou digitando um valor HEX.
4. Clique em Regenerar para sortear uma nova variação aleatória a partir da próxima semente até gostar da forma.
5. Copie a marcação SVG ou a regra clip-path CSS, ou clique em Baixar para salvar um arquivo .svg.

Exemplos

Perguntas frequentes

O que a complexidade e o contraste controlam?

A complexidade é o número de pontos de ancoragem distribuídos uniformemente ao redor de um círculo (de 3 a 16) — mais pontos criam um contorno mais detalhado. O contraste é o quanto cada ponto é empurrado aleatoriamente para dentro ou para fora do raio base (de 0 a 100), então 0 fica perto de um círculo simples e 100 é altamente irregular.

Como funciona o botão Regenerar?

Cada blob é construído a partir de uma semente numérica somada à sua complexidade e ao seu contraste. Regenerar aumenta a semente em um e recalcula a forma, então você obtém uma nova variação aleatória a cada clique enquanto a complexidade, o contraste e a cor permanecem os mesmos.

Qual é a diferença entre a saída SVG e a do clip-path?

A saída SVG é um arquivo <svg> completo e independente que você pode incorporar ou baixar. A saída clip-path é uma única regra CSS usando path() que você pode aplicar a qualquer elemento HTML para recortá-lo no mesmo contorno do blob.

Posso mudar a cor e baixar o arquivo?

Sim. Defina a cor de preenchimento com a amostra de cor ou um valor HEX; a prévia, o SVG e o download usam todos ela. Clique em Baixar para salvar um arquivo blob.svg gerado inteiramente no seu navegador.

Minhas formas ou configurações são enviadas a um servidor?

Não. O blob é gerado com uma função aleatória local baseada em semente e todas as strings de SVG e clip-path são construídas no seu navegador. Nada é enviado, então a ferramenta funciona offline e seu trabalho permanece privado.