UIに幾何学的な美しさ！ 積み木のようにボクセルを構築し、SVGで描画するミニマルなJavaScriptエンジン -heerich.js
Post on:2026年4月20日
sponsors
ボクセル（volumeとpixelを組み合わせた用語）を積み木のように組み合わせて3Dの空間配置を2Dの平面に構築し、SVGに変換して描画する超軽量のJavaScriptエンジンを紹介します。
ボクセルの組み合わせの自由度はかなり高く、さまざまな形状を作り出せます。さらにスケーリングは無限、個々の面にスタイルを設定したり、アニメーションで動かすこともサポートしています。
heerich.jsは、3Dのボクセル（体積volumeとピクセルpixelを組み合わせた用語）を構築し、それをSVGに変換するミニマルなJavaScriptエンジンです。ボクセルでさまざまな形状を描画することができ、建築的な優雅さを実現できます。他のライブラリやJavaScriptの依存関係はありません。
heerichの名は、幾何学的な段ボール彫刻で知られるドイツの彫刻家：エルヴィン・ヘーリヒにちなんだもので、積み重ねられたトポロジー、意図的な減算、そして固体と絶対的な空虚の間に存在する静かな緊張感からインスピレーションを得ています。
ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。
さっそくどんな形状が描画できるか見てましょう。
各デモページはすべて、ボクセルがアニメーションで動きます。
まず、基本となるプリミティブなボックス。角（中心でも可）とサイズ（幅と高さ）によって定義される長方体です。デモページではドラッグすると、サイズと奥行きを変更できます。
続いて、スフィアです。立方体のボクセルを組み合わせ定義された球体です。球の中心から半径が大きくなるにつれ、ボクセルの数が増え、整数グリッド上で最もきれいな対称形状が生成されます。
ラインは、始点と終点の2つの空間座標間の連続したボクセル化されたパスを描画します。ラインのストロークが太くなるにつれ、ボクセルの重なり合い数が増加します。
ここまでは基本となる形状でしたが、ボクセルはもっと自由な形状にすることもできます。構造的にはボックスとスフィアとラインを組み合わせたものです。
アライメントは、異なるサイズのボクセルを任意の場所に位置合わせします。
ブーリアン演算では、すべての形状プリミティブは既存のボクセルのグリッドにどのように組み込まれるかを設定します。特定のボクセルを追加したり、ボクセル分削除したり、重なり合うボクセルを残したり、各ボクセルを切り替えたりできます。
heerich.jsのJavaScriptエンジンは、面ごとにスタイルを設定できます。たとえば、ボクセルの上部は#ff6666、前面は#6666ff、右側は#66ff66のように、局所的にペイントを適用できます。この機能は、特定の断面に陰影をつけるのに適しています。
静的なオブジェクトの代わりに、スタイルを(x, y, z)パラメーターが追跡する計算関数として割り当てることができます。これにより、グラデーションや周期的なパターンを実現でき、各ボクセルを手動で設定する必要がなくなります。
ボクセルはすべて同じサイズではありません。内部軸に沿ってサイズを調整する機能もサポートされており、視認性を維持しながら、スケールを調整できます。
ボクセルはアニメーションにも対応しています。フレームごとにアクティブなシーケンスを再描画することで、離散座標を段階的に切り替え、ピクセル単位のキビキビとした動きを実現します。
作者のXは、下記より。
Just released heerich.js, a tiny voxel engine that renders 3D scenes to SVG
╬ Boolean ops
◮ Oblique & perspective
Zero dependencies
◌ Pure vector output, infinite scalingNamed after Erwin Heerich's geometric cardboard sculptures. pic.twitter.com/sXjcu3d59I
— David Aerne (@meodai) March 28, 2026
sponsors
