Generador de Patrones Isométricos SVG

Cubos Isométricos 3D Renderizados como SVG Plano

Las ilustraciones isométricas —cubos de tres colores apilados en una rejilla— se reconocen al instante y son sorprendentemente fáciles de componer usando SVG. Este generador construye una rejilla de cubos donde cada cubo es tres rombos <polygon> (superior, izquierdo, derecho) rellenos con tres colores distintos a tu elección.

Cómo se Dibujan los Cubos

Para cada posición (col, fila) en la rejilla, la herramienta calcula los desplazamientos isométricos (cos(30°) en X, sin(30°) en Y) para que los cubos encajen perfectamente. Con la variación de altura activada, cada cubo obtiene una altura apilada aleatoria de 1 a 3, dando al patrón ese look característico de "ciudad vista desde arriba".

Una semilla controla qué cubos se dibujan, cuáles se omiten (para huecos) y la altura de cada pila. Pulsa volver a lanzar para explorar nuevos layouts manteniendo tu paleta.

Controles

• Columnas / Filas — tamaño de la rejilla.
• Tamaño de ficha — qué tan grande es cada cubo.
• Color Superior / Izquierdo / Derecho — tres colores de cara. Elige tonos complementarios para dar profundidad.
• Fondo — relleno detrás de los cubos.
• Variación de altura — activa alturas de pila aleatorias.

Usos

• Fondos de arquitectura y construcción
• Imágenes hero de dashboards de datos
• Ilustraciones editoriales para artículos sobre inmobiliaria, ciudades o blockchain
• Tiles de videojuegos (terreno, paisaje urbano)
• Decoración de diapositivas

Como cada cubo es un grupo de polígonos, puedes post-procesar los colores con buscar-y-reemplazar o animarlos con CSS para transiciones divertidas.