今回はhtmlのsvgタグを使ってクリスマスツリーを書いています
予め作成したsvgではなくpathで直接書いています
ポイント
pathタグのd属性にsvgを書いていく
Mで開始点を指定してZで終わりです。
中に直線(L)や円弧(A)をつかって図形を書いていきます
他にもベジェ曲線なども使えます
成果物
See the Pen tree by yakipote (@yakipote) on CodePen.
https://codepen.io/yakipote/pen/RwGpmMQアニメーションも
過去に作ったものですがアニメーションも実装できます(マウスオーバーでで動きます)
See the Pen sakura mouseover animation by yakipote (@yakipote) on CodePen.
参考