CSSとJSで作れる超クリエイティブな動的テクスチャ＆パターン8選

テクスチャとパターンはウェブデザインにおいて頻繁に取り入れられています。背景やコンテンツのメインポイントとしてなど、テクスチャやパターンは表現したいデザインのトーンを定めてくれる大切な役割をもちます。

近年では進化したWeb技術によって、テクスチャとパターンを使ってより強力な効果を得られるようになりました。静的な表現だけでなく、動きや影をつける技術などと組み合わせることで驚くようなグラフィック生み出せます。

この記事では、定番のテクスチャとパターンに遊び心のある表現を取り入れた、超クリエイティブなコードスニペットを8つご紹介します。

さぁ、素敵なデザインの数々を楽しんでいってください！ ただし見た後の数分間は、重機械などの操作は厳禁です。目の錯覚が起こるかもしれませんので……。

1. 33行のコードで作られた巨大な円環

まずは回転する幾何学的な円環をご紹介します。下記でお見せする例は純粋に美しく、幻想的です。数時間ずっと眺めていられそうな、非常に魅力的なパターンといえるでしょう。

驚くべきことに、このなめらかで美しい動きを作り出すのにはたった33行のJavaScriptコードしか使われていないのです。

See the Pen inner torus by Ryan Thavi (@rthavi) on CodePen.

2. 無限に続く細菌繁殖

実際の世界において幅広く応用が効きそうなこのデザイン。細菌の繁殖する様子を表したり、点描絵画を再現したりなど様々な用途がありそうですね。

見ているうちに引き込まれていってしまいます。

See the Pen Text Circle Packing by Samarth Gulati (@samarthg) on CodePen.

3. 心落ち着かせる満点の星空

テクスチャは背景としても大活躍します。下記に紹介するのは煌めく星空いっぱいの夜空。派手すぎないエフェクトが見る人を癒してくれます。

ユーザビリティを保ちながらデザインに動きをつけるのは、とても良いアイデアでしょう。

See the Pen Glowing Stars by Francesco Allegrini (@francesco-allegrini) on CodePen.

4. カーソルに連動するディスコボール

続いては興味深い例をご紹介します。

このテクスチャにはThree.jsによる環境マッピングが使われており、カーソルの動きに合わせてディスコボールの表面の輝きが変化していきます。また、カーソルを上下するとピントが変化する仕掛けが施されています。

See the Pen GLSL: Chrome by Liam Egan (@shubniggurath) on CodePen.

5. HTML 5 CanvasとJSで樹木を育てる

手描きのパラパラ漫画風の、樹木が成長するアニメーションです。手書き風の背景が激しく動くのと同時に、樹木が芽を出し、葉を茂らせます。

驚くことに、これを作るのに使われているのはHTML 5 CanvasとJavaScriptのみなのです。画像は一切使われていません。

See the Pen A Tree by Mustafa Enes (@pavlovsk) on CodePen.

6. カーソルに連動する50万個のドット

これを最初に見た人は、宇宙現象の様子か何かと勘違いするかもしれません。実際はWebGL2を使ったパーティクルのtransform feedbackです。

色が変化する50万ものパーティクルがカーソルの動きに合わせて反応します。もしもこんなことが本当に宇宙空間で起きているとしたら、少し怖くなってしまいますね。

See the Pen 1 million particles. WebGL2 Transform Feedback by Karol Stopyra (@stopyransky) on CodePen.

7. 無限に生成される幾何学模様

思わず目を奪われてしまうこのアニメーション。さまざまな図形が色とりどりに変化する様子は、非常にレトロかつ幾何学的な雰囲気を醸し出します。

また、アニメーションをクリックすると別バージョンのエフェクトを見ることができます。

See the Pen Art of Logarithm by jagarikin (@jagarikin) on CodePen.

8. ハローサンシャイン

徐々に移り変わっていく背景の上に、重なって回転している図形の数々。このテクスチャ／パターンにはたくさんの動きが盛り込まれています。カーソルを左右に動かすと、それに連動して中央の図形が変形します。

Webページの背景には不向きかもしれませんが、バナーやメインエリアに注目を集めるためには使えそうです。

See the Pen Chamaleon Mood by Bailh (@cathbailh) on CodePen.

まとめ

いかがでしたか？

本記事でご紹介した例では、シンプルで基本的なテクスチャやパターンを、全く新しい見せ方へと進化させています。色とりどりで動きのある、ユーザーを引き込むようなスニペットばかりです。

コーディングの知識と創造力を上手く組み合わせることで、ここまで素晴らしいテクスチャとパターンを作り出せるのだということを体現していますね。

今回ご紹介したオシャレなテクスチャやパターンを参考に、より視覚的に楽しめるクリエイティブなWebデザイン制作を目指しましょう！

（原文：Eric Karkovack　翻訳：Tamura Yui）