0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

REDIMPULZAdvent Calendar 2020

Day 16

HTMLでクリスマスツリー

Last updated at Posted at 2020-12-16

今回は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.

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?