O que é um blob SVG?

Um blob é uma forma suave e orgânica, sem bordas retas, situada entre um círculo e uma mancha. Blobs são uma decoração popular no design web moderno: atrás de imagens e ilustrações principais, como molduras de avatar, como fundos de seções ou como botões e badges descontraídos. Como são gráficos vetoriais, permanecem nítidos em qualquer tamanho e ocupam apenas algumas centenas de bytes.

Descrição da ferramenta

Esta ferramenta gera formas de blob aleatórias como código SVG limpo diretamente no navegador. Pressione Randomize até gostar da forma e, em seguida, ajuste quantas saliências ela tem, o quanto é irregular e quão arredondadas são suas curvas. Preencha-a com uma cor sólida ou um gradiente, ou desenhe-a como um contorno; opcionalmente, faça-a se transformar entre formas em um loop suave. Baixe o resultado como SVG ou PNG, ou copie-o como marcação SVG, plano de fundo CSS ou clip-path CSS.

Recursos

  • Blobs aleatórios que você pode reproduzir: a mesma seed e as mesmas configurações sempre geram a mesma forma
  • Complexidade, aleatoriedade e suavidade ajustáveis, de pedras arredondadas a estrelas pontiagudas
  • Preenchimento sólido, gradiente ou contorno com qualquer cor
  • Animação de morph que alterna entre formas em loop, incorporada ao SVG sem JavaScript
  • Download como SVG ou PNG transparente no tamanho que você escolher
  • Código SVG, plano de fundo CSS e clip-path CSS pronto para copiar

Como funciona

A ferramenta posiciona pontos ao redor de um círculo, move cada um deles para dentro por uma distância aleatória e desenha uma curva fechada suave passando por eles. A curva é medida com precisão e dimensionada para que o blob preencha a imagem de uma borda à outra. Um gerador de números aleatórios baseado em seed determina cada ponto; assim, um número ou uma palavra usada como seed recupera o mesmo blob posteriormente. Para a animação, vários blobs com o mesmo número de pontos são colocados em um único elemento SVG animate, e o navegador interpola entre eles.

Dicas

  • De cinco a oito pontos com aleatoriedade média produzem formas clássicas de blob; uma aleatoriedade menor resulta em um visual mais calmo e profissional.
  • Reduza a suavidade para 0% para criar polígonos semelhantes a cristais ou pedras preciosas.
  • Use o código clip-path CSS para recortar uma foto ou um vídeo no formato do blob.
  • Anote a seed ou digite sua própria palavra como seed para recriar exatamente o mesmo blob mais tarde.
  • Mantenha a animação de morph lenta, em torno de 8 a 15 segundos por loop, para que ela permaneça discreta no plano de fundo.