Cento E Um Dálmatas

Gerando o padrão de manchas de dálmatas em SVG ou Photoshop

O padrão de manchas de dálmatas — aquele visual com fundo branco e manchas irregulares pretas — aparece o tempo todo em projetos de design, estampas têxteis e ilustrações. A abordagem mais direta é gerar essas manchas proceduralmente usando JavaScript, sem depender de bibliotecas pesadas. O código abaixo cria um arquivo SVG com manchas aleatórias de tamanhos variados, posicionadas de forma a simular o padrão real.

cento e um dálmatas — técnica procedural com SVG

O segredo aqui é controlar o tamanho, a posição e a sobreposição das manchas. Se você simplesmente colocar círculos aleatórios, o resultado fica artificial demais. As manchas reais de dálmatas têm formas orgânicas, bordas levemente irregulares e tendem a agrupar-se em regiões do corpo do animal. Para um fundo puramente decorativo, uma aproximação razoável funciona assim: Você define um canvas SVG com viewBox. Depois, gera entre 80 e 150 círculos com raios entre 8 e 45 pixels, distribuindo as coordenadas x e y de forma randômica, mas com uma regra simples de não sobreposição excessiva: se um novo círculo colidir com mais de três círculos já existentes, você descarta e gera outro. A cor de preenchimento é #1a1a1a e o fundo é #f5f5f5. Esse método leva cerca de dois segundos para rodar em um navegador comum e produz um resultado que fica aceitável para capas, wallpapers e texturas de fundo.

Um problema que eu encontrei na prática é que, ao aplicar esse padrão em tecido, as manchas muito próximas das bordas do SVG acabam sendo cortadas de forma estranha quando o material é recortado. A solução que eu uso agora é adicionar uma margem de segurança de cerca de 60 pixels ao redor do viewBox e preenchê-la com manchas maiores que ficam parcialmente fora da área visível, simulando a continuidade do padrão. Isso evita aquele efeito de "manchas truncadas na borda" que aparece em 90% dos arquivos enviados para impressão. Se o seu objetivo é algo mais realista do que apenas manchas circulares, a saída procedural simples não basta. Você precisaria usar noise de Perlin ou domínio distorcido para deformar os contornos de cada mancha. O custo aumenta consideravelmente: o tempo de renderização passa de segundos para minutos, e o resultado visual melhora de forma marginal para a maioria dos casos de uso cotidiano. Para a grande maioria dos designers, a versão com círculos e a margem de segurança resolve o problema sem complicação.

Para quem prefere usar Photoshop, existe um caminho diferente: crie um plano de fundo branco, adicione uma camada de preenchimento preto, aplique o filtro "Desfocar diferencial" com valor entre 2 e 4 pixels, depois converta em seleção e preencha novamente. O resultado é menos controlável mas pode ser ajustado manualmente camada por camada. Eu recomendo a abordagem SVG sempre que possível, porque o arquivo final é leve, escalável e fácil de modificar programaticamente. O arquivo SVG gerado pode ser baixado e aberto diretamente no navegador ou editado em qualquer editor vetorial. Se você precisar de variações — manchas maiores concentradas no centro, ou um tom de preto menos intenso — basta alterar os parâmetros de raio e cor no código antes de executar. O processo todo leva menos de cinco minutos do início ao arquivo final.