Design / SVG

Gerador de blobs SVG (formas orgânicas aleatórias)

Crie formas blob suaves e aleatórias para fundos e ilustrações: escolha quantos pontos usar e o nível de aleatoriedade, selecione uma cor ou um gradiente de duas cores e baixe ou copie o SVG.

Gerador de blobs SVG (formas orgânicas aleatórias): Os pontos são distribuídos uniformemente ao redor de um círculo, e cada um é puxado em direção ao centro por uma quantidade aleatória. Em seguida, eles são unidos por uma curva fechada suave. Poucos pontos e alta aleatoriedade geram formas irregulares; muitos pontos e baixa aleatoriedade geram formas suaves, quase redondas. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Gerador de blobs SVGProcessamento local

Roda inteiramente no seu navegador

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>

Os pontos são distribuídos uniformemente ao redor de um círculo, cada um puxado em direção ao centro por uma quantidade aleatória, e unidos por uma curva fechada suave. Menos pontos e mais aleatoriedade produzem formas mais irregulares; 0% de aleatoriedade produz um círculo. Blobs criam fundos suaves atrás de fotos, ícones e títulos.

Usos

Blobs criam fundos suaves atrás de fotos de produtos, ícones, avatares e títulos. Atrás de textos, use uma cor clara ou um preenchimento com baixa opacidade para manter o contraste; para ver o blob atrás do vidro fosco, combine-o com o gerador de glassmorphism.

Edição

O resultado é um único caminho com curvas de Bézier cúbicas, por isso ele pode ser aberto em qualquer editor vetorial. Para alterar alguns pontos manualmente, cole-o no editor de SVG.

Como usar

  1. Escolha o número de pontos e o nível de aleatoriedade.
  2. Selecione uma cor ou um gradiente.
  3. Clique para gerar novos blobs até encontrar um de que goste. Depois, baixe ou copie o SVG.

Privacidade e limitações

As formas são desenhadas no seu navegador.

Ferramentas relacionadas

onda SVGEditor SVGGlassmorphism

Perguntas frequentes

Como coloco uma foto dentro de um blob?

Copie o path e use-o em um clipPath de SVG ou salve o blob e use-o como mask-image do CSS sobre a foto.

Posso animar um blob?

Sim: gere dois blobs com o mesmo número de pontos e anime o atributo d do path entre eles. A mesma quantidade de pontos deixa a transformação suave.

Existe um limite de tamanho?

O SVG tem 400 × 400, mas pode ser redimensionado para qualquer tamanho sem perder nitidez.

Ferramenta grátis · no seu navegador execuções · não precisa de conta