Tiny Online Tools
Cubos Isométricos 3D Renderizados como SVG Plano
Ilustrações isométricas — cubos de três cores empilhados em uma grade — são reconhecíveis instantaneamente e surpreendentemente fáceis de compor em SVG. Este gerador monta uma grade de cubos onde cada cubo é formado por três losangos <polygon> (topo, esquerda, direita) preenchidos com três cores escolhidas.
Como os Cubos São Desenhados
Para cada posição (coluna, linha) na grade, a ferramenta calcula os deslocamentos isométricos (cos(30°) em X, sin(30°) em Y) para os cubos se encaixarem perfeitamente. Com a variação de altura ativada, cada cubo recebe uma altura empilhada aleatória de 1 a 3, dando ao padrão aquela aparência característica de "cidade vista de cima".
Uma semente controla quais cubos são desenhados, quais são omitidos (para lacunas) e a altura de cada pilha. Clique em rerrolar para explorar novos layouts mantendo a paleta.
Controles
- Colunas / Linhas — tamanho da grade.
- Tamanho da peça — o quão grande é cada cubo.
- Cor Topo / Esquerda / Direita — três cores de face. Escolha tons complementares para profundidade.
- Fundo — preenchimento atrás dos cubos.
- Variação de altura — alterna alturas empilhadas aleatórias.
Usos
- Fundos de arquitetura e construção
- Imagens hero de dashboards de dados
- Ilustrações editoriais sobre imobiliário, cidades ou blockchain
- Tiles de videogames (terreno, cenário urbano)
- Decoração de slides de apresentação
Como cada cubo é um grupo de polígonos, você pode fazer find-and-replace de cores individualmente ou animar com CSS para transições divertidas.