Que formato de path SVG a ferramenta produz?

A ferramenta produz um path SVG padrão com curvas de Bézier cúbicas usando o comando "C". O markup completo é um elemento com viewBox "0 0 300 300", usando coordenadas absolutas e terminando com "Z".

Como uso uma forma blob num projeto real?

Pode usar o SVG baixado como fonte , como background-image CSS, ou incorporar o código diretamente no seu HTML. Em CSS pode aplicar clip-path com a função path() usando a string do path copiado.

Gerador de Blob

Gere formas blob orgânicas aleatórias como SVG. Personalize complexidade e aleatoriedade, escolha a cor, depois baixe ou copie o código SVG.

SVG instantâneoCopiar pathDownload grátis

① Ajuste complexidade, aleatoriedade e cor ② Clique Aleatório para gerar ③ Copie SVG ou baixe PNG

Complexidade (pontos)6

Aleatoriedade50

Semente

Cor de preenchimento#C9B89A

Como funciona

O blob é construído com N pontos equidistantes num círculo, cada um deslocado para dentro ou fora uma quantidade aleatória. Curvas de Bézier cúbicas conectam os pontos usando a conversão Catmull-Rom.

Complexidade

Controla o número de pontos de ancoragem (6–10). Mais pontos criam silhuetas mais intrincadas e irregulares. Menos pontos produzem blobs mais simples e arredondados.

Aleatoriedade

Controla quanto cada ponto pode desviar do raio do círculo base. 0 produz um círculo perfeito; 100 produz a máxima irregularidade orgânica.

O que é uma forma blob e como é gerada?

As formas blob são silhuetas suaves, orgânicas, semelhantes a amebas, muito usadas no design web moderno para fundos, ilustrações, avatares e acentos de UI. São geradas algoritmicamente distribuindo pontos de ancoragem ao redor de um círculo em intervalos angulares iguais, depois deslocando cada ponto radialmente. Curvas de Bézier cúbicas — via conversão Catmull-Rom — conectam os pontos suavemente. O resultado é um path SVG incorporável em HTML ou CSS via background-image, clip-path ou <svg> inline, exportável para Figma, Illustrator e Inkscape.

Perguntas frequentes

Uma forma blob é uma silhueta suave, orgânica e arredondada que lembra uma ameba natural. Ao contrário das formas geométricas, os blobs têm contornos irregulares e fluidos. São amplamente usados no design web moderno para fundos, ilustrações e decorações de UI.

Os blobs são criados colocando N pontos de ancoragem em intervalos angulares iguais ao redor de um círculo. Cada ponto é então deslocado aleatoriamente para dentro ou fora. Curvas de Bézier cúbicas — via conversão Catmull-Rom para Bézier — conectam todos os pontos num path fechado e fluido.

A complexidade controla o número de pontos de ancoragem (6–10). Mais pontos permitem mais variação local. A aleatoriedade controla quanto cada ponto pode desviar do círculo base. A 0 todos os pontos estão no círculo; a 100 desviam ao máximo.

A ferramenta produz um path SVG padrão com curvas de Bézier cúbicas usando o comando "C". O markup completo é um elemento <svg> com viewBox "0 0 300 300", usando coordenadas absolutas e terminando com "Z".

A forma gerada é determinista com os mesmos valores de seed, complexidade e aleatoriedade. Aleatoriedade muito alta com baixa complexidade pode ocasionalmente produzir paths auto-intersectantes. SVG escala infinitamente sem perda de qualidade.

Pode usar o SVG baixado como fonte <img>, como background-image CSS, ou incorporar o código <svg> diretamente no seu HTML. Em CSS pode aplicar clip-path com a função path() usando a string do path copiado.

Sim. SVG e curvas de Bézier cúbicas são suportados em todos os browsers modernos. O arquivo baixado é um XML SVG compatível com Figma, Illustrator, Inkscape e Sketch.

O que é uma forma blob e como é gerada?

Perguntas frequentes

Explore a nossa rede