Gerador de Blobs SVG

O que é um gerador de blobs SVG?

Um gerador de blobs SVG cria formas orgânicas fechadas amostrando pontos ao redor de um círculo e conectando-os com curvas Bézier suaves. O resultado é uma silhueta macia e fluida — o tipo de forma que você vê atrás de um hero de marketing, em volta de uma foto de perfil, ou como blob colorido de fundo numa landing page.

Blobs ficam no ponto doce entre geometria e aleatoriedade. Ajuste o número de pontos para conseguir formas tipo gomim (3-4), pedrinha (5-6), ou caóticas (10+). Mexa o slider de aleatoriedade para ir de quase-circular a totalmente distorcido. Aperte o dado para rolar uma nova seed a qualquer momento.

Tudo roda no seu navegador. Exporte como snippet SVG pronto para colar, arquivo .svg baixável, ou valor clip-path CSS que você pode aplicar diretamente em qualquer elemento HTML para mascará-lo na forma do blob.

O que você vai aprender fazendo blobs

• Curvas Bézier cúbicas dão ao blob sua suavidade — cada par de pontos adjacentes tem duas alças de controle, calculadas para que a tangente seja contínua em cada junção.
• Splines Catmull-Rom (usados aqui) derivam essas alças automaticamente dos pontos vizinhos, então você não precisa ajustar control points na mão para manter a curva suave.
• CSS clip-path: path(...) pode aplicar uma forma de blob a qualquer elemento — imagem, div, vídeo — sem afetar sua caixa de layout.

Como gerar um blob passo a passo

1. 1

   Escolha contagem de pontos

   Menos pontos (3-5) fazem blobs tipo gomim. Mais pontos (8-12) fazem formas pedrentas e irregulares.

2. 2

   Defina a aleatoriedade

   0% é um círculo. 50% dá curvas suaves no formato blob. 100% dá silhuetas selvagemente distorcidas e dramáticas.

3. 3

   Escolha cor ou gradiente

   Use preenchimento sólido ou ative Gradiente e escolha duas cores mais um ângulo. Combina com padrões populares de hero sections.

4. 4

   Aleatorize e exporte

   Aperte o dado para rolar uma nova seed. Quando estiver feliz, copie o SVG, copie o clip-path CSS, ou baixe o arquivo .svg.

Onde blobs funcionam melhor

Três formas comuns de usar um blob e o que ficar atento.

Exemplos de blob para testar

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Bem-vindo ao Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Erros comuns com blobs SVG

• Esquecer o viewBox e dar largura/altura fixas ao <svg>. A forma não escala responsivamente — use viewBox mais width/height no CSS.
• Animar paths preenchidos grandes a cada frame. Rasterização de path é cara; use transform/opacity ou pré-blur com CSS filter para que a GPU cuide disso.
• Copiar o <svg> inline no Tailwind/Bootstrap e herdar display: inline em vez de block. O gap padrão do baseline deixa alguns pixels embaixo da forma.

Perguntas frequentes