Softonic

Gerador de Blob SVG

Etapa 1 / 2
Próximo

As formas de blob substituíram círculos perfeitos em 2018 como o “fundo arredondado amigável” da UI moderna, aparecem atrás de ilustrações hero, como máscaras de avatar e como manchas de cor em páginas de destino. Este gerador constrói um blob a partir de uma caminhada aleatória ao redor de um círculo, suavizando o polígono com curvas Bézier quadráticas na forma orgânica e ligeiramente ondulada que os designers desejam. Você controla quantos pontos de controle (complexidade), quão selvagem a caminhada fica (contraste) e a semente aleatória, e então copia o SVG.

Como o blob é construído

  1. 1

    Escolha a cor e a complexidade

    A complexidade define o número de pontos de controle (3-12). Mais pontos significam mais saliências.

  2. 2

    Defina o contraste

    O contraste controla quão longe cada ponto se desvia do raio base. Baixo contraste = quase circular; alto = lobado agressivamente.

  3. 3

    Escolha uma semente

    A semente é o número aleatório que fixa a forma do blob. Mesma semente, mesmo blob; clique em randomizar para obter um novo.

  4. 4

    Copie o SVG

    Você obtém um único `<path>` dentro de um viewBox de 400×400. Coloque-o em qualquer lugar onde SVG é suportado.

Anatomia do caminho do blob

O gerador distribui N pontos uniformemente ao redor de um viewBox de 400×400 (centro 200, 200; raio base 130), perturba cada raio por ±contraste, e então conecta cada par com uma curva Bézier quadrática:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

O midx, midy é o ponto médio do ponto atual e do próximo, colocar o final de cada curva lá é o que arredonda o polígono em uma forma orgânica.

Folha de dicas de parâmetros

Configuração Faixa Efeito
Complexidade 3-12 Número de lobos. 5-7 é o ponto ideal para UI.
Contraste 0-100 Amplitude da caminhada aleatória. 30-60 parece natural.
Semente 1-9999 Determinístico; mesma semente = mesmo blob em execuções.
Cor hex Preenchimento único, sem contorno. Adicione fill-opacity manualmente se necessário.

Onde os blobs funcionam melhor

  • Decoração de fundo, atrás de títulos, em cantos vazios de seções hero.
  • Máscaras de avatar, aplique o caminho como um clip-path para molduras de retrato orgânicas.
  • Acentos de ilustração, manchas da cor da marca sob ícones ou números.
  • Máscaras de imagem, com mask-image CSS, um blob recorta fotos em recortes orgânicos.

Dicas

  • Mantenha blobs sem contorno para fundos; um contorno faz com que pareçam adesivos.
  • Para morfismo animado, gere dois blobs com a mesma complexidade e sementes diferentes, depois anime o atributo d com uma biblioteca como flubber ou svg-morpheus.
  • Inline o SVG em vez de usar <img src=blob.svg>, isso permite que você mude a cor de preenchimento com variáveis CSS em tempo de execução.
  • Mantenha o viewBox, mas remova o width="400" height="400" explícito se quiser que o blob escale para qualquer contêiner.

Perguntas frequentes

A semente inicializa o srand() do PHP antes da caminhada aleatória. Mesma semente = mesma sequência de chamadas rand() = mesmos deslocamentos de ponto = caminho idêntico.

Sim, mas apenas se ambos os caminhos tiverem o mesmo número de comandos e contagem de pontos. Mantenha a complexidade idêntica e apenas varie a semente para obter pares amigáveis à interpolação. Use uma biblioteca de interpolação como GSAP MorphSVG ou flubber para a animação real.

Substitua fill="#hex" no caminho por fill="url(#gradient-id)" e adicione uma definição de <linearGradient> ou <radialGradient> dentro de um bloco <defs>. Propriedades personalizadas CSS também funcionam se você inline o SVG.

Está limpo, mas não minificado. Execute-o através do SVGO uma vez se você se importar com o tamanho em bytes; você pode normalmente remover 20-30% dos caracteres.

Não. O SVG é gerado dinamicamente a partir dos parâmetros na forma da URL e nada é registrado.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Ferramenta disponível em outros idiomas