クリスマス・イブなのでクリスマスツリーを作る

この記事は [ゆめみ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yumemi) の24日目の記事です。

# はじめに

みなさまは「クリスマス」と聞いて何を思い浮かべますか？サンタクロースでしょうか。それともイルミネーションでしょうか。
私の場合は家の中に飾っていたクリスマスツリーを思い浮かべます。
我が家では、毎年クリスマスの日にクリスマスツリーの前にプレゼントとサンタさんからの手紙が置いてありました。もうクリスマスツリーは飾っていませんが、あの頃を思い出して HTML + CSS でクリスマスツリーを作ろうと思います。

# 星

昔は擬似要素( `::before` / `::after` )を使用して作成していましたが、 IE のサポートが終了するので **clip-path** を使用して作成します。
clip-path に関しては、 [Clippy](https://bennettfeely.com/clippy/) というサイトがおすすめです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNZreNN" data-user="takashimelon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takashimelon/pen/WNZreNN">
  star.html</a> by takashi (<a href="https://codepen.io/takashimelon">@takashimelon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# ツリー

星と同じく clip-path を使用して作成します。葉の部分は polygon でもよかったのですが、少し丸みを帯びさせるために path で作成しています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWeROOx" data-user="takashimelon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takashimelon/pen/XWeROOx">
  tree.html</a> by takashi (<a href="https://codepen.io/takashimelon">@takashimelon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# オーナメント

clip-path の circle でも作成できますが、慣れ親しんだ border-radius で作成しています。
また、オーナメントは基本光りませんが、アニメーションさせたくなったので光らせます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWEEGZN" data-user="takashimelon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takashimelon/pen/MWEEGZN">
  ornament.html</a> by takashi (<a href="https://codepen.io/takashimelon">@takashimelon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# クリスマスツリー

星・ツリー・オーナメントを配置すれば完成です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYEwbjY" data-user="takashimelon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takashimelon/pen/zYEwbjY">
  christmas-tree.html</a> by takashi (<a href="https://codepen.io/takashimelon">@takashimelon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# おわりに

メリークリスマス！

# おまけ ~SVG編~

丸みをつけたいと思い、 SVG でも実装しました。ベジェ曲線を完全に理解すれば clip-path でも実装できますが、今回はシンプルかつ簡単に実装するために `stroke-linejoin="round"` で丸みを表現しました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzrNLZB" data-user="takashimelon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takashimelon/pen/YzrNLZB">
  christmas-tree.svg</a> by takashi (<a href="https://codepen.io/takashimelon">@takashimelon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>