SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。
（当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。
所感について、諸々書こうと思います。

成果物

実際に完成したのは、以下の画像ができました。

紙と紙の間が広い感じがしますが、初心者にしては満足しています。
紙の枚数は動的に制御できます。
個人サイトのブログ記事枚数に応じて、このSVG画像を表示しています。

ジブンノート

silverbirder のホームページ。ブログ記事や自己紹介などを掲載しています。

silverbirder.github.io

作り始めは、長方形から

まずは、紙を1枚表現しようと思いました。
SVGでは、四角形の表示に rect というSVGの要素が用意されています。

• <rect> - SVG | MDN - developer.mozilla.org

SVGのビューポートの中心に、長方形を置くだけというのを試しました。
最初は、これだけでも少し苦労しました。
長方形を上下左右中央に置くには、SVGのビューポートの大きさと、長方形の置くXY座標の位置と長さを計算する必要があるからです。
積む前提なので、座標を動的に設定できるようにしないといけないからです。
とりあえず最初は、全部 数値をハードコードして作りました。

次に長方形を回転させたかったので、transform=rotate() を使って回転させます。
長方形が大きすぎると、ビューポートの外に長方形がはみ出てしまうため一回転してもはみ出ない大きさに手直しします。

• transform - SVG | MDN - developer.mozilla.org

長方形を積む

1枚の長方形ができたら、次は積めるようにしたいです。
色々と試行錯誤した結果、以下のようなデザインになりました。

※ 長方形の角を丸くしています。

SVGの重なり順（Z軸）は、「コードの記述順（描画順）」で決まります。
後から書かれた要素が、前にある要素の上に表示されます。

そのため、一番下にある紙を最初に書き、一番上にある紙を最後に書く必要があります。
イメージとしては、y座標が少しずつ小さくなる感じです。
ただし最大枚数を指定しないと、ビューポートの外側に紙を置くことになるので、そこは要注意です。

長方形から、平行四辺形に

積んだ紙を少し斜め上から眺めると、紙は直角の長方形ではなく鈍角の平行四辺形が理想的です。
そのため、短形の rect ではなく、多角形を表す polygon を使用します。

• <polygon> - SVG | MDN - developer.mozilla.org

polygon では、1つ1つXY座標を指定して線が繋がります。
平行四辺形の表すためには、XY座標の位置を決めるために三角関数の知識が必要になりました 。
開始位置から角度と長さを使って、サイン、コサイン、タンジェントという懐かしい知識を呼び覚まして、XY座標を見つけます。
このあたりは、AIに指示して書かせるようにしました。

結果、以下の図のような積んだ紙ができました。

※ ついでに、紙の上に path 線を引いています。

あれ、直角っぽい...？

終わりに

AIに任せ始めた途端、SVGのコードがよくわからなくなってしまいました...。
納得できていないので、ブラッシュアップしていきたいです！