Gerador de blobs SVG
Crie formas orgânicas de blob em SVG com pontos, aleatoriedade e seeds ajustáveis. Preenchimento sólido, gradiente ou contorno; baixe o .svg ou copie a data URI CSS.
Configurações do blob
As mesmas configurações e a mesma semente sempre geram a mesma forma.
Pré-visualização
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");Ferramentas Relacionadas
Ver TodasO que é Gerador de blobs SVG?
Gera formas de blob suaves e orgânicas em SVG. Controle o número de pontos de ancoragem, o quanto a forma é irregular e seu tamanho, escolha preenchimento sólido, em gradiente ou só contorno e exporte como arquivo .svg ou data URI CSS.
Como usar Gerador de blobs SVG
- Escolha o preenchimento (Sólido, Gradiente ou Contorno) e a(s) cor(es).
- Defina os pontos de ancoragem, a aleatoriedade e o tamanho.
- Clique em Aleatório ou informe uma seed para obter uma forma específica.
- Baixe o .svg ou copie o código SVG.
- Ou copie o fundo CSS (data URI).
Exemplo
Points 4, randomness 0, size 100, solid #8a3ffc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
Quando usar Gerador de blobs SVG
Use blobs como fundos decorativos, máscaras de imagem, molduras de avatar ou detalhes de ilustração. Com aleatoriedade 0 você obtém quase um círculo; para formas geométricas exatas, use border-radius ou clip-path no CSS.
Como funciona Gerador de blobs SVG
Os pontos de ancoragem são distribuídos uniformemente em um círculo (raio de 45% do tamanho). A distância de cada ponto até o centro é reduzida por um valor pseudoaleatório com seed de até 60% × aleatoriedade. Uma spline Catmull-Rom fechada passando pelos pontos é convertida em comandos Bézier cúbicos, o que garante um contorno suave, sem quinas. Preenchimentos em gradiente usam um linearGradient SVG do canto superior esquerdo ao inferior direito.
Casos de Uso Comuns
- Formas decorativas de fundo em landing pages
- Máscaras de imagem para fotos de perfil
- Detalhes de ilustração e adesivos
- Blobs animados que se transformam (gere vários com seeds diferentes)
- Placeholders em apresentações
Perguntas Frequentes
Posso recriar um blob de que gostei?
Sim. Guarde a seed junto com os pontos, a aleatoriedade e o tamanho; eles sempre produzem o mesmo caminho.
Como uso um blob como máscara de imagem?
Coloque o caminho dentro de um <clipPath> SVG ou use o SVG baixado com mask-image no CSS.
Por que o blob nunca encosta nas bordas?
O raio máximo é 45% do tamanho, deixando uma pequena margem para que contornos e antisserrilhamento não sejam cortados.