Gerador de Triangulação Delaunay

Continuar na ferramenta

Mais páginas desta ferramenta

background low poly SVG

Background low poly em SVG

Um fundo low poly não é ruído aleatório: é uma triangulação de Delaunay, uma malha de triângulos que evita formas finas e alongadas, renderizada como SVG vetorial que escala sem perder nitidez atrás do conteúdo de uma hero section.

Por que Delaunay produz um mosaico limpo

A triangulação de Delaunay conecta um conjunto de pontos maximizando o menor ângulo de cada triângulo, o que evita as fatias finas e disformes que qualquer outra ligação de pontos tende a criar. A regra que garante isso é a propriedade do círculo circunscrito: nenhum ponto do conjunto pode cair dentro do circuncírculo de nenhum triângulo da malha. O algoritmo Bowyer-Watson, usado por este gerador, aplica essa regra incrementalmente a partir de um super-triângulo que envolve todos os pontos, removendo e reconectando triângulos toda vez que um novo ponto viola a regra do circuncírculo de algum vizinho.
Para N pontos no plano, o número de triângulos de uma triangulação é 2N-2-k, onde k é a quantidade de pontos no fecho convexo do conjunto (o "contorno externo" dele). Com seed "vynuo" e 48 pontos na área padrão de 720 por 420 pixels, essa ferramenta gera 86 triângulos e um SVG de aproximadamente 14 KB: o teto teórico seria 2 vezes 48 menos 2, ou seja 94 triângulos, e a diferença de 8 corresponde aos pontos do fecho convexo, que não fecham triângulo por dentro do contorno.
A malha resultante é a dual do diagrama de Voronoi: cada célula de Voronoi (a região mais próxima de um ponto do que de qualquer outro) corresponde a um vértice na triangulação de Delaunay, e cada aresta de Delaunay cruza uma fronteira entre duas células de Voronoi. É por isso que uma malha low poly com boa distribuição de pontos evita buracos e sobreposições: as duas estruturas geométricas se encaixam ponto a ponto.

Três densidades de malha low poly

Hero de landing page, densidade média

Entrada: seed: vynuo, points: 48, width: 720, height: 420, jitter: 30
Saída esperada: 86 triângulos, SVG de aproximadamente 14 KB

Densidade média equilibra detalhe visual com peso de arquivo: dá para reduzir o tamanho do SVG sem perder o efeito de facetas.

Fundo minimalista, poucos pontos

Entrada: seed: minimal, points: 12, width: 720, height: 420, jitter: 10
Saída esperada: Malha próxima do teto teórico de 22 triângulos (2 vezes 12 menos 2)

Com poucos pontos, quase todos ficam no fecho convexo, então a malha real chega perto do teto matemático em vez de ficar bem abaixo dele.

Textura densa para seção de rodapé

Entrada: seed: footer-mesh, points: 100, width: 720, height: 420, jitter: 30
Saída esperada: Malha densa, SVG proporcionalmente maior que a de 48 pontos

O limite máximo de pontos desta ferramenta é 120; acima disso o peso do SVG cresce mais rápido que o ganho visual percebido.

FAQ da ferramenta completa

O que torna Delaunay diferente de ligar pontos aleatoriamente?

A regra do círculo circunscrito vazio: nenhum ponto fica dentro do círculo que passa pelos vértices de um triângulo. Isso maximiza o menor ângulo e evita triângulos extremamente finos, gerando uma malha mais equilibrada.

A seed garante o mesmo resultado?

Quanto mais pontos, melhor?

Delaunay serve para UI?

O SVG pode ser editado depois?

A triangulação é de precisão científica?

O resultado pode ficar pesado?

A geração usa backend?

Perguntas frequentes

A mesma seed sempre gera o mesmo fundo low poly?

Sim, a seed alimenta um gerador pseudoaleatório determinístico: os mesmos parâmetros de seed, quantidade de pontos, dimensões e jitter sempre reproduzem exatamente a mesma posição de pontos e, portanto, a mesma malha de triângulos.

Quantos pontos preciso para um fundo de hero section sem parecer vazio nem poluído?

Entre 30 e 50 pontos costuma ser o ponto ideal para uma hero de largura padrão: menos que isso deixa triângulos grandes demais que competem com o texto sobreposto, mais que isso aproxima o teto de 120 pontos desta ferramenta e aumenta o peso do SVG sem ganho visual proporcional.

Por que alguns triângulos da malha ficam maiores que outros mesmo com pontos espalhados igualmente?

Porque o algoritmo Bowyer-Watson não distribui área igualmente, ele só garante que nenhum ponto cai dentro do circuncírculo de um triângulo vizinho. O parâmetro jitter desta ferramenta adiciona um deslocamento aleatório extra à posição de cada ponto, o que aumenta essa variação natural de tamanho entre triângulos.

O SVG gerado pesa muito para uma hero section?

Depende da densidade: 48 pontos na área padrão de 720 por 420 pixels rendem cerca de 14 KB, próximo do peso de uma imagem JPEG comprimida pequena, mas escalável sem perda porque é vetor. Reduzir a contagem de pontos para 20 a 30 corta esse peso proporcionalmente sem trocar de formato.

Gerador de Triangulação Delaunay

Continuar na ferramenta

Mais páginas desta ferramenta

Background low poly em SVG

Por que Delaunay produz um mosaico limpo

Três densidades de malha low poly

Hero de landing page, densidade média

Fundo minimalista, poucos pontos

Textura densa para seção de rodapé

FAQ da ferramenta completa

Perguntas frequentes

A mesma seed sempre gera o mesmo fundo low poly?

Quantos pontos preciso para um fundo de hero section sem parecer vazio nem poluído?

Por que alguns triângulos da malha ficam maiores que outros mesmo com pontos espalhados igualmente?

O SVG gerado pesa muito para uma hero section?

Próximos passos

Gerador de Triangulação Delaunay

Continuar na ferramenta

Mais páginas desta ferramenta

Background low poly em SVG

Por que Delaunay produz um mosaico limpo

Três densidades de malha low poly

Hero de landing page, densidade média

Fundo minimalista, poucos pontos

Textura densa para seção de rodapé

FAQ da ferramenta completa

Perguntas frequentes

A mesma seed sempre gera o mesmo fundo low poly?

Quantos pontos preciso para um fundo de hero section sem parecer vazio nem poluído?

Por que alguns triângulos da malha ficam maiores que outros mesmo com pontos espalhados igualmente?

O SVG gerado pesa muito para uma hero section?

Próximos passos