Gerador de Blobs

Formas SVG orgânicas com curvas de Bézier personalizadas.

Configurações

Bordas do blob (vértices)6

Espinhosidade (complexidade)60%

Modo de preenchimento

SólidoLinearRadial

Cor inicial

Cor final

Código SVG XML bruto

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

Componente React JSX

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Como funciona

Ajuste a aleatoriedade e a complexidade para modelar uma blob orgânica.
Escolha cores e um gradiente para o preenchimento.
Regenere até obter uma forma de que goste.
Exporte o código SVG bruto ou um componente React JSX pronto para uso.

Para que serve

Adicionar uma forma de fundo orgânica a uma landing page.
Criar blobs decorativas para um design system.
Inserir uma blob SVG diretamente num projeto React como componente.

Bom saber

As blobs são geradas proceduralmente — regenere para explorar variações em vez de editar pontos individuais.
Complexidade muito alta produz dados de caminho mais longos; blobs mais simples mantêm o SVG leve.

Perguntas frequentes

Posso usar a blob diretamente no React?

Sim — exporte como componente JSX e insira no seu projeto, ou pegue o SVG bruto para qualquer outra stack.

As formas são editáveis depois?

O SVG exportado é vetor padrão que você pode ajustar em qualquer editor, embora a própria ferramenta trabalhe por regeneração, e não por edição de pontos.

Algo é enviado?

Não. A geração e a exportação acontecem inteiramente no seu navegador.

Ferramentas relacionadas

Visualizador de DXF

Paleta de Cores

Conversor de Cores

Gerador de Box Shadow CSS

Verificador de Contraste