Tiny Online Tools
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.