Gerador de ondas e blobs em CSS e SVG

Por que estas curvas não têm dobras

A maioria dos geradores desse tipo posiciona os pontos de controle Bézier por uma regra de bolso — a um terço do caminho até o próximo ponto, normalmente — e o resultado tem uma pequena dobra em cada ponto amostrado. Você não percebe numa miniatura e não consegue ignorar quando a forma tem três metros atrás de uma imagem de destaque. Este deriva cada ponto de controle da tangente de uma spline de Catmull-Rom, de modo que os dois segmentos de curva que se encontram num ponto calculam a *mesma* direção a partir dos dois mesmos vizinhos. Suavidade não é um ajuste aqui, nem algo verificado depois: é consequência da aritmética, e o conjunto de testes confirma que isso vale em cada junção de milhares de formas geradas.

O CSS que você copia é a forma que você viu

Duas coisas costumam quebrar entre a pré-visualização de um gerador e o CSS que ele entrega. A primeira é a cerquilha de uma cor hexadecimal: dentro de um data URI, um `#` sem codificar encerra a URL, o navegador lê o resto como um fragmento e o fundo simplesmente não pinta — sem erro no console e sem nada no painel de rede. Aqui cada cor é codificada em porcentagem antes de chegar à folha de estilo. A segunda só afeta os blobs de border-radius: se os dois raios que se encontram numa borda somarem mais de 100%, o navegador reduz *todos* os cantos para compensar, então a forma que ele desenha é mais achatada do que a que você escolheu. Os valores que esta ferramenta emite são gerados dentro desse limite, então o navegador os deixa em paz.

Bytes, mostrados em vez de escondidos

Uma forma colada numa folha de estilo é peso em cada carregamento de página, então a contagem de bytes fica embaixo da caixa de saída e se atualiza enquanto você arrasta. As coordenadas são arredondadas para duas casas decimais — um centésimo de pixel numa tela de 1440 unidades, muito abaixo do que qualquer monitor consegue mostrar — o que costuma eliminar um terço ou mais do comprimento do caminho sem nenhuma mudança visível. Se o número parecer grande, reduzir os pontos quase sempre resolve: é o único controle que muda o tamanho de forma significativa.

Sem conta, sem upload, sem marca d'água

Não há servidor para onde enviar nada. O gerador são alguns kilobytes de JavaScript que rodam nesta página, suas configurações ficam no armazenamento local deste navegador, e as formas que você cria são suas sem exigir atribuição. Depois que a página carrega ela funciona sem conexão, o que também significa que funciona atrás de um proxy corporativo que bloqueia metade da internet.