CSSで幾何学模様を描いてみた

# はじめに
この記事は アイスタイル [Advent Calendar 2023](https://qiita.com/advent-calendar/2023/istyle) 1日目の記事です。

こんにちは、アイスタイルではフロントエンド周りをちまちま触っているsakaguchiiと申します。
すこし昔の話になりますが弊社のサービス「[@cosme](https://www.cosme.net/)」のロゴをリニューアルした際、「Dot & Space」がロゴのコンセプトとなりました。

https://www.wantedly.com/companies/istyle/post_articles/202287


今回は幾何学模様である「Dot&Space」をCSSで実装するとしたらどう実装しようか？というものを記事にしようと思います😊
# ① Dotを並べてみる
コンセプトの通り「Dot」から生まれる「Space」を表現するために、まずはシンプルに丸い要素を並べてみます。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwgMxWG" data-user="sakaguchii" 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/sakaguchii/pen/VwgMxWG">
  dot1</a> by sakaguchii (<a href="https://codepen.io/sakaguchii">@sakaguchii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

「Dot&Space」を表現することは出来ましたが、大量のdivで書いているため汎用性も実用性もありません。

# ② cssで書いてみる
形状または円形に二色以上の色が放射線状に広がる背景を生成できる`radial-gradient()`を利用します。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKJoMQy" data-user="sakaguchii" 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/sakaguchii/pen/KKJoMQy">
  dot2</a> by sakaguchii (<a href="https://codepen.io/sakaguchii">@sakaguchii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

主に円形を記述しているのは下記になります。
```
background-image: radial-gradient(closest-side, #2eb6aa 96%, #fff);
```
`#2eb6aa`から`#fff`へのグラデーションの幅を`96%`として設定しています。
このパーセンテージは色と色の境目を表現しており、これを100%で設定するとジャギる状態になってしまうため96%にすることで自然な見た目になるようにしています。

# ③ カスタマイズしてみる
色を変えたり、パターンとしてより自然な見え方になるよう配置を変えます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWLVedP" data-user="sakaguchii" 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/sakaguchii/pen/MWLVedP">
  dot4</a> by sakaguchii (<a href="https://codepen.io/sakaguchii">@sakaguchii</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="NWoYrVw" data-user="sakaguchii" 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/sakaguchii/pen/NWoYrVw">
  dot3</a> by sakaguchii (<a href="https://codepen.io/sakaguchii">@sakaguchii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

背景として描画することで上にテキストを記述することが出来る等、①では叶えられなかった実用性が生まれました。
また、`background-position`で描画位置を変更することでパターンとしてより自然な形で並べることが出来ました:relaxed:

# 最後に
実際に書いてみた感想としては、調整しないとジャギってしまったり、逆に調整したことによって微妙に円の境目が惜しい感じがあり、実務上でキービジュアルやファーストビューとして持ってくるには、画像を使った方が良いな…と個人的には思いました。
ただこういう機会がなければCSSで幾何学模様を描画してみようとも思わず、挑戦することもなかったので、楽しく描くことが出来ました！

ここまで読んでくださりありがとうございました😊