今回はJavaScriptのライブラリを使用して、ページの背景に動きをつけてみました。使用したライブラリはGitで公開されている「particles.js」を使用しました。
下記ページでまずはダウンロードができます。

particles.js

ダウンロードした圧縮ファイルを解凍し、デモファイルや必要なファイルがそろっていますので、「particles.min.js」を読み込むようにhtmlへ設定します。

<!-- ダウンロードしたファイル   -->
<script src="js/particles.min.js"></script>
<!-- 設定ファイル   -->
<script src="js/particles_set.js"></script>

次に、幾何学を表示させる要素を用意します。

<div class="demo01" id="demo01"></div>

まずはデフォルトの設定で表示させてみましょう。

▼JavaScript [particles_set.js]

window.onload = function() {
    // "id"を指定
    particlesJS("demo01");
}

デモ1

たったこれだけですが、動きのある要素が作れちゃいます。次に、設定値についてご説明いたします。

▼JavaScript [particles_set.js]

particlesJS("demo", { //アニメーションを表示する要素(id)を指定する。
  "particles": {
    // シェイプ数
    "number": {
      // 要素に出力する数
      "value": 80,
      "density": {
        "enable": true,  //true:有効, false:無効
        "value_area": 1000  // 表示間隔
      }
    },
    // 色
    "color": {
      "value": "#7fbfff"  // 複数設定["#000,#fff"]
    },
    "shape": {
      // シェイプの形
      "type": "circle",  // circle, edge, triangle, polygon, star, image, 複数指定["circle", "triangle", "image"]
      //シェイプボーダー設定
      "stroke": {
        // 幅
        "width": 0,
        // 色
        "color": "#000000"
      },
      // type = polygonの詳細設定
      "polygon": {
        // 角形
        "nb_sides": 4
      },
      // type = imageの詳細設定
      "image": {
        "src": "img/github.svg",  // 画像パス
        "width": 100,  // 幅
        "height": 100  // 高さ
      }
    },
    // シェイプ透明度
    "opacity": {
      // シェイプ透明度の値
      "value": 0.6,
      // ランダム設定
      "random": false,  //true:有効, false:無効
      // アニメーション
      "anim": {
        "enable": false,  //true:有効, false:無効
        "speed": 1,  //速度
        "opacity_min": 1,  //最小透過率
        "sync": false  //同期 true:有効, false:無効
      }
    },
    // シェイプサイズ
    "size": {
      // サイズ値
      "value": 10,
      // サイズランダム
      "random": true,  //true:有効, false:無効
      // アニメーション
      "anim": {
        "enable": false,
        "speed": 10,
        "size_min": 0.1,
        "sync": true
      }
    },
    // 線でつなげる
    "line_linked": {
      "enable": true,  //true:有効, false:無効
      "distance": 200,  // 間隔
      "color": "#ffffff",  // 色
      "opacity": 0.8,  // 透過
      "width": 2  // 幅
    },
    // 動き
    "move": {
      "enable": true,  //true:有効, false:無効
      "speed": 2,  // 速度
      "direction": "none",  // 動く方向 none, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left
      "random": true,  // ランダム設定 true:有効, false:無効
      "straight": false,  // 静止 true:有効, false:無効
      "out_mode": "bounce",  // 外側の動き ボックス内：bounce 外に逃がす：out
      "bounce": false,  // ランダム設定 true:有効, false:無効
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    // イベント設定
    "events": {
      // マウスホバー
      "onhover": {
        "enable": true,  //true:有効, false:無効
        "mode": "repulse"  //grad:シェイプと繋ぐ, bubble:拡大, repulse:反発
      },
      // クリック
      "onclick": {
        "enable": false,  //true:有効, false:無効
        "mode": "push"  //push:追加, remove:削除, bubble:拡大, repulse:反発
      },
      // 画面リサイズ
      "resize": true
    },
    // マウスイベントの設定
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 100,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  //Retina Display対応
  "retina_detect": true
});

バリエーションが豊富なのでアイディア次第でさまざまな表現ができそうですね！
サンプルデモでは設定値を変えて雰囲気の異なる動きを表現してみました。

デモページは、こちら （デフォルトと合わせて3つの動きを表現しています。）

今回の記事やデモページ作成にあたり
particles.jsを使って要素の背景に美しいアニメーションを表示するさんのページを参考にさせていただきました。
ありがとうございます。