LoginSignup
0
0

More than 3 years have passed since last update.

REDIMPULZAdvent Calendar 2020Day 16redimpulz
@bunchan_kinレッドインパルス株式会社

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.

アニメーションも

過去に作ったものですがアニメーションも実装できます(マウスオーバーでで動きます)

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
Sign upLogin
0
0