今回はJSを使って幾何学模様を作っていきたいと思うよ！
これを作っていくと、Webサイトがぐんっとおしゃれになるからぜひ、修得してみてね！
今回のJSの操作はこちらの方のサイトを参考にさせてもらいました。
参考元：https://liginc.co.jp/191958
今回作成するもの
See the Pen
ExaXZZj by 悠(人) (@yutohanabusa)
on CodePen.
今回紹介するのは、カーソルの動きによって変形する幾何学模様です。
これをヘッダーに適用させたりすると、かなりおしゃれになります。
particles.js
まず、最初にプラグイン（フォルダ）をダウンロードしてもらいます。
このプラグインはparticles.jsというもので、今回の作業で必要なものをあらかじめ用意してくれています。（かなりありがたい！）
ですので、今回行う幾何学模様の作製はかなり簡単にできるので安心してください。
以下のサイトでダウンロードすることができるので、訪れてみてください。
ダウンロードは「Download」で簡単にできるのでクリックしてください。
ダウンロードして、展開すると「particles.js-master」のフォルダが作製されるかと思います。
プラグイン：https://vincentgarreau.com/particles.js/
余裕があれば、ダウンロードページの右の欄から要素の変更ができるので遊んでみてください。
ここである程度、どこの値をいじればどこが変わるのかを理解できれば、後からする作業がかなりわかりやすくなります。
プラグインを使おう
それでは、実際にプラグインを使ってみましょう。
まずはじめに、適当な練習用フォルダを作成します。
この際のフォルダ名はなんでも構いません。（私の場合はpaticle_practiceにしています）
このフォルダに、「particles.js-master」から「particles.js」というファイルをコピペします。
続いて、HTMLとCSS、JSファイルを新たに作成します。
ファイル名は任意で決め、以下のコードをコピペしてください。（○○○○の部分は任意で決めた名前を入れてください）
HTML
CSS
JS
JSはこちらの方のものを引用しています。
引用元：https://liginc.co.jp/191958
こちらの方のソースコードは上のようにコメントでどこを変えればよいのか、示してくださっているので引用させてもらいました。
これだけで、最初に示していたような動きを作製することができます。
応用編
これらを応用することで、以下のような色や模様を作ることができます。
ここでは、シェイプの数、色、形を変更し、全体の動きを調整しています。
これらの変更の仕方は、上で書いたJSのコードである程度書いてあるのでそれを参考にしてください。
ちなみに、シェイプは図形の接点となる丸などの図形のところとなります。
See the Pen
BayZpwP by 悠(人) (@yutohanabusa)
on CodePen.
See the Pen
eYmRgeY by 悠(人) (@yutohanabusa)
on CodePen.
See the Pen
JjoJEOR by 悠(人) (@yutohanabusa)
on CodePen.
最後に
今回は、JSのプラグインを用いて幾何学模様の作成を行い、それをおしゃれにしてきました。
これを使うとヘッダーなどをおしゃれにすることができるのでぜひ、使用してみてください！
場合によっては少し動作が重くなってしまう場合があるので、そこは気を付けるようにしてください。
今回はこれで以上となります。
最後まで読んでいただきありがとうございました！
