Gerador de Blobs

Blobs SVG orgânicos em segundos

Blobs são as formas suaves e irregulares que aparecem atrás de seções de destaque, fotos de perfil, ilustrações e telas de boas-vindas de aplicativos. Eles quebram grades rígidas de retângulos e dão ao layout um visual amigável e artesanal. Este gerador de blobs cria essas formas como caminhos SVG limpos: escolha alguns parâmetros, veja a forma atualizar-se e copie o código diretamente para o seu projeto.

Como um blob é apenas um caminho SVG, ele é minúsculo, pode ser redimensionado sem perda de qualidade e pode ser recolorido com CSS ou animado por morphing entre dois caminhos com o mesmo número de pontos.

Como a forma é construída

O gerador coloca um número escolhido de pontos de ancoragem ao redor de um círculo. A aleatoriedade puxa cada ponto para dentro numa quantidade aleatória diferente, enquanto o tamanho redimensiona todo o contorno dentro da tela. Os pontos de ancoragem são então ligados por uma spline Catmull-Rom fechada, convertida em curvas Bézier cúbicas, o que garante uniões suaves sem cantos visíveis. Com três ou quatro pontos obtêm-se formas simples de seixo, enquanto dez ou mais pontos com aleatoriedade alta produzem formas ondulantes, parecidas com nuvens. Com 0% de aleatoriedade, o resultado é uma forma regular arredondada até se tornar um círculo perfeito.

Cores, contornos e reutilização

Preencha o blob com uma única cor ou com um gradiente diagonal de duas cores e adicione um contorno de 1 a 16 pixels quando quiser um visual de adesivo ou emblema. Cada blob nasce de uma seed numérica: a mesma seed com as mesmas configurações produz sempre a mesma forma, por isso é possível guardar a seed, ajustar um valor mais tarde e manter todo o resto idêntico. Faça o download de um SVG para a web ou de um PNG de 800 por 800 pixels com fundo transparente para slides e ferramentas de design. Todo o processamento acontece localmente no navegador e nada é enviado.