JavaScriptでSVGのpolygonを生成し、CSSのtransformで多角錐にする

CSSのtransformで多角柱を組み立てる応用で、側面を三角形にすることで角錐をつくっています。高さの指定はcss transformのscaleY()で縦方向に伸び縮みさせることで調整しています。

角数を指定するだけで3角錐~円錐(ただしとても処理が重たくなる)まで生成できます。
polygon、triangleの色も指定できるようにしてみました。

このコードで、1ページ中に複数の多角錐を表示させることができます。
描画先のdivにcssのtransformをかけることで角錐を回転さすことができます。。
(今回は立体とわかりやすいように左側の角錐をアニメーションさせてあります)

↓以下が実際のソースサンプルです。

▼JavaScript

▼CSS

▼HTML

デモページは、こちら