Isometric cube tiling
A mosaic of cubes in isometric perspective slides diagonally while a soft highlight wanders across it.
Settings
Code
<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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
The classic tumbling blocks illusion as a living background. Each cube is drawn with three faces in your three colors, top, left and right, so the tiling reads as solid 3D blocks or as flat stars depending on how you look at it. The whole surface glides diagonally by exactly one tile so the loop never shows a joint.
It is pure HTML, inline SVG and CSS with no JavaScript. Density scales the cubes, speed changes the drift, and a soft light pass adds depth. Reduced motion stops both animations. Good for tech, architecture and game sites.