Formas orgânicas e ondas SVG com seed reprodutível, gradiente, animação de morph e exportação em SVG, PNG, CSS, JSX ou HTML.
O blob é montado a partir de N pontos distribuídos em círculo (coordenadas polares), cada um com o raio empurrado para dentro ou para fora por um valor pseudoaleatório determinado pela seed, a força desse empurrão é o controle de irregularidade. Os pontos são ligados por uma curva Catmull-Rom convertida para Bezier cúbica com vizinhança circular, ou seja, o último ponto enxerga o primeiro como vizinho, o que fecha o caminho sem o "bico" visível que aparece quando uma implementação trata a primeira e a última curva como bordas separadas. A suavidade controla o fator de conversão da Catmull-Rom: em 0% os pontos de controle colapsam sobre os vértices e o blob vira um polígono de lados retos, em 100% a curva fica no máximo arredondada. As ondas usam a mesma ideia de curva suave, mas em caminho aberto: cada camada tem amplitude, frequência (quantos períodos cabem na largura), fase e opacidade próprias, e camadas empilhadas com cores e transparências diferentes criam profundidade, como nos divisores de seção do Haikei e do get-waves.io. Todo o cálculo roda em funções puras, sem `Math.random`, então a mesma configuração sempre produz o mesmo `d` de path, byte a byte.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gerador-blob-svg"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de Blob e Ondas SVG"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Porque um blob aleatório sem seed é impossível de recuperar: se você gostou da forma e recarregou a página, ela some. Com seed, a mesma string sempre reconstrói exatamente o mesmo blob, então você pode anotar a seed, colar num link ou versionar no código, e o resultado visual nunca muda.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400" role="img" aria-label="Blob shape"><path d="M 382.71,200 C 381.77,223.55 318.24,281.78 296.92,296.92 C 275.61,312.07 224.42,328.02 200,329.83 C 175.58,331.63 107.09,327.52 87.63,312.37 C 68.16,297.23 34.84,227.92 33.15,200 C 31.45,172.08 53.63,94.45 73.1,73.1 C 92.56,51.75 172.95,14.44 200,17 C 227.05,19.56 283.64,73.69 304.96,95.04 C 326.28,116.39 383.65,176.45 382.71,200 Z" fill="#3DDC97"/></svg>O SVG é gerado inteiramente no navegador, a partir da seed. Nada do que você desenha aqui sai do seu dispositivo.