SVG アイソメトリックパターンジェネレーター

フラット SVG として描画されるアイソメトリック 3D キューブ

アイソメトリックイラスト — グリッド上に積まれた 3 色のキューブ — は一瞬で識別でき、SVG で構成するのが驚くほど簡単です。このジェネレーターはキューブのグリッドを生成し、各キューブは 3 つの <polygon> ひし形（上、左、右）を選択した 3 色で塗りつぶして構成します。

キューブの描き方

ツールはグリッドの各 (列, 行) 位置でアイソメトリックオフセット（X に cos(30°)、Y に sin(30°)）を計算し、キューブを完全に揃えます。高さのばらつきを有効にすると、各キューブはランダムに 1〜3 の積み重ね高さを取り、「上空から見た都市」的な独特のルックが生まれます。

シードは、どのキューブを描画するか、どれをスキップするか（隙間を作るため）、そして各スタックの高さを制御します。再生成 でパレットを保ったまま新しいレイアウトを試せます。

コントロール

• 列 / 行 — グリッドサイズ。
• タイルサイズ — 各キューブの大きさ。
• 上 / 左 / 右 の色 — 3 つの面の色。補色を選ぶと立体感が増します。
• 背景 — キューブの背後の塗りつぶし。
• 高さのばらつき — ランダムなスタック高さの ON/OFF。

用途

• 建築・建設系の背景
• データダッシュボードのヒーロー画像
• 不動産、都市、ブロックチェーン関連記事の編集イラスト
• ビデオゲームタイル（地形、都市景観）
• プレゼンスライドの装飾

各キューブはポリゴンのグループなので、検索置換で個別の色を後から変更したり、CSS で遊び心あるトランジションをアニメーション化したりできます。