SVG 等距图案生成器

以纯 SVG 呈现等距 3D 立方体

等距插画——网格中堆叠的三色立方体——辨识度极高，用 SVG 搭建起来出乎意料地简单。此生成器构建立方体网格，每个立方体由三个 <polygon> 菱形（顶、左、右）组成，分别填充你挑选的三种颜色。

立方体的绘制

工具按 (列, 行) 位置计算等距偏移（X 方向 cos(30°)，Y 方向 sin(30°)），确保立方体完美拼接。启用高度差后，每个立方体会随机拥有 1 至 3 的堆叠高度，营造「俯瞰城市」的典型观感。

种子决定哪些立方体被绘制、哪些被省略（形成空缺）以及每堆的高度。按 重新生成 在保留调色板的同时探索新布局。

控制项

• 列数 / 行数 — 网格大小。
• 瓦片大小 — 每个立方体的尺寸。
• 顶 / 左 / 右 颜色 — 三个面颜色。互补色能带出立体感。
• 背景 — 立方体后方的纯色。
• 高度差 — 开关随机堆叠高度。

使用场景

• 建筑与工程背景
• 数据仪表盘英雄图
• 关于房地产、城市或区块链文章的编辑插画
• 视频游戏瓦片（地形、城市景观）
• 演示幻灯片装饰

由于每个立方体都是多边形组合，可通过查找替换逐块改色，或用 CSS 做俏皮的动画过渡。