search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Organization

HTMLでクリスマスツリー

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

参考

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
What you can do with signing up
0