Mosaico de cubos isométricos
Un mosaico de cubos en perspectiva isométrica se desliza en diagonal mientras un reflejo suave lo recorre.
Ajustes
Código
<div class="pt-iso-cubes"><svg aria-hidden="true"><defs><pattern id="pt-iso-tile" width="38.105" height="66" patternUnits="userSpaceOnUse"><polygon class="t" points="19.05,0.00 38.11,11.00 19.05,22.00 0.00,11.00"/><polygon class="l" points="0.00,11.00 19.05,22.00 19.05,44.00 0.00,33.00"/><polygon class="r" points="19.05,22.00 38.11,11.00 38.11,33.00 19.05,44.00"/><polygon class="t" points="0.00,33.00 19.05,44.00 0.00,55.00 -19.05,44.00"/><polygon class="l" points="-19.05,44.00 0.00,55.00 0.00,77.00 -19.05,66.00"/><polygon class="r" points="0.00,55.00 19.05,44.00 19.05,66.00 0.00,77.00"/><polygon class="t" points="38.11,33.00 57.16,44.00 38.11,55.00 19.05,44.00"/><polygon class="l" points="19.05,44.00 38.11,55.00 38.11,77.00 19.05,66.00"/><polygon class="r" points="38.11,55.00 57.16,44.00 57.16,66.00 38.11,77.00"/><polygon class="t" points="0.00,-33.00 19.05,-22.00 0.00,-11.00 -19.05,-22.00"/><polygon class="l" points="-19.05,-22.00 0.00,-11.00 0.00,11.00 -19.05,0.00"/><polygon class="r" points="0.00,-11.00 19.05,-22.00 19.05,0.00 0.00,11.00"/><polygon class="t" points="38.11,-33.00 57.16,-22.00 38.11,-11.00 19.05,-22.00"/><polygon class="l" points="19.05,-22.00 38.11,-11.00 38.11,11.00 19.05,0.00"/><polygon class="r" points="38.11,-11.00 57.16,-22.00 57.16,0.00 38.11,11.00"/></pattern></defs><rect width="100%" height="100%" fill="url(#pt-iso-tile)"/></svg><i class="lt"></i></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Fondos
Ver todos: FondosDónde usarlo
La clásica ilusión de los bloques en escalera convertida en fondo vivo. Cada cubo tiene tres caras con tus tres colores, arriba, izquierda y derecha, así el mosaico se lee como bloques sólidos en 3D o como estrellas planas según cómo lo mires. Toda la superficie se desliza en diagonal exactamente una tesela para un bucle sin cortes.
Es HTML, SVG en línea y CSS puro, sin JavaScript. La densidad escala los cubos, la velocidad cambia el desplazamiento y un brillo suave añade profundidad. El movimiento reducido detiene ambas animaciones. Va bien en tecnología, arquitectura y videojuegos.