Gerador de blob: formas SVG e blobs animados em CSS
Gerador de blob
Gerador de blob: blobs SVG aleatórios e animação de blob em CSS | We.Inc
Gere formas orgânicas de blob aleatórias como paths SVG, ou como um blob em CSS puro com border-radius que muda de forma com @keyframes prontos para copiar. Com seed, para você recuperar o mesmo blob.
Um blob é uma forma fechada, suave e irregular, usada atrás de fotos, ícones e textos de destaque. Este gerador cria blobs de duas formas: como um path SVG desenhado por pontos empurrados aleatoriamente ao redor de um círculo, ou como CSS puro usando oito porcentagens de border-radius. A versão em CSS pode mudar de forma com uma animação @keyframes curta que você copia.
Blob em SVG ou blob em CSS?
Blob com path SVG
Blob com border-radius em CSS
Variedade de formas
Qualquer número de saliências, muito irregular
Formas de ovo e de pedra com quatro lados suaves
Comporta conteúdo
Como imagem de fundo ou máscara
Sim, é uma caixa normal com texto ou imagem dentro
Animação de transformação
Precisa de JavaScript ou SMIL
@keyframes no border-radius
Saída
Um elemento svg ou arquivo .svg
Algumas linhas de CSS
Blobs suavizam layouts rígidos em grade e dão a uma marca uma forma só dela. Cada blob aqui vem de um número de seed, então as mesmas configurações com a mesma seed sempre recriam a mesma forma. Experimente o modo SVG para formas com muitos lóbulos e depois mude para o modo CSS quando quiser uma caixa que ondula devagar.
Escolha o modo SVG ou o modo CSS.
No modo SVG, defina quantos pontos a forma tem e o quanto cada ponto pode se afastar do círculo. Cada nova seed gera uma nova forma.
No modo CSS, clique em Nova forma para sortear novos valores de border-radius e ative Animar para ter uma transformação entre três formas.
Copie o markup SVG, baixe o arquivo .svg ou copie o CSS e os keyframes.
Entre 5 e 8 pontos com aleatoriedade média geram as formas mais simpáticas. Muitos pontos com aleatoriedade alta parecem respingos.
Use o blob SVG como mask-image ou atrás de uma foto com position: absolute para que o texto continue selecionável.
Mantenha as animações de blob lentas, de 6 a 12 segundos, e use alternate para que o movimento nunca volte de repente ao início.
Desative a animação para visitantes que preferem movimento reduzido. A saída dos keyframes já inclui essa media query.
Perguntas frequentes
Como funciona o blob em CSS?
O border-radius aceita raios horizontais e verticais separados para cada canto, escritos como quatro valores, uma barra e mais quatro. Quando os dois raios que se encontram em cada lado somam 100 por cento, os cantos se fundem em um único contorno orgânico e suave em vez de um retângulo arredondado.
Como animar um blob em CSS?
Coloque dois ou mais valores de border-radius em @keyframes e rode a animação com ease-in-out, infinite e alternate. Os navegadores interpolam o raio de cada canto, então o contorno flui suavemente de uma forma para a outra. Ative Animar no modo CSS para receber keyframes prontos.
Posso obter o mesmo blob de novo depois?
Sim. A forma depende só das configurações e do número da seed. Anote a seed, ou guarde o código copiado, e o gerador vai recriar exatamente esse contorno.
Posso usar o blob SVG como clip-path?
Você pode referenciá-lo com clip-path: url(#id) quando o SVG estiver na mesma página, ou colar o atributo d em clip-path: path() para um tamanho fixo em pixels. Uma mask-image com o arquivo .svg é a forma mais fácil de fazê-lo acompanhar o tamanho do elemento.
Como o blob SVG é desenhado
O gerador distribui pontos de forma uniforme ao redor de um círculo e depois move cada um para dentro ou para fora por uma quantidade aleatória controlada pelo controle de aleatoriedade. Uma curva suave passa pelos pontos com segmentos de Bézier cúbicos, para que não haja cantos vivos.
Menos pontos e menos aleatoriedade geram uma pedrinha. Mais pontos e mais aleatoriedade geram um respingo ou uma nuvem.
Animação de blob sem JavaScript
A propriedade CSS d, que permitiria transformar um path SVG em uma folha de estilo, não é Baseline segundo o MDN, então ela falha em alguns dos principais navegadores. Por isso a opção animada usa border-radius. Cada raio de canto é um comprimento ou uma porcentagem, então o navegador consegue fazer a transição entre os keyframes sozinho.
Adicionar uma rotação lenta junto com a mudança de raio deixa o movimento mais orgânico. Mantenha-a suave para que fique em segundo plano.
Exemplo de animação de blob em CSS
Blob que muda de forma atrás de uma moldura de foto
Três formas de border-radius em uma animação alternada, mais um giro lento. A query de movimento reduzido a interrompe para quem pede menos movimento.
Como ler um border-radius de oito valores
Os valores antes da barra são os raios horizontais e os depois dela são os verticais, cada grupo na ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Canto
Raio horizontal
Raio vertical
Superior esquerdo
Superior direito
Inferior direito
Inferior esquerdo
Criador de blobs
Cada forma vem da seed mostrada abaixo da prévia. Mude os controles ou sorteie uma nova seed e depois copie o SVG ou o CSS.