ダイナミックなアニメーション背景を生成するジェネレーター・「pocoloco」

pocoloco

See the Pen <a href="https://codepen.io/kachibito/pen/LYjRbjK"> Untitled</a> by kachibito (<a href="https://codepen.io/kachibito">@kachibito</a>) on <a href="https://codepen.io">CodePen</a>. 
pocolocoはダイナミックなアニメーション背景を生成するジェネレーターです。

メッシュ、グラデーション、ラインの3タイプが用意されており、それぞれ実装するためのコードが発行されます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      .background--custom {
        background-color: #FFFFFF;
        width: 100vw;
        height: 100vh;
        position: absolute;
        overflow: hidden;
        z-index: -2;
        top: 0;
        left: 0;
      }
      canvas#canvas {
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 60%;
        transform: rotate(-12deg) scale(2) translateY(-56%);
        --gradient-color-1: #0e1d37; 
        --gradient-color-2: #bfbd7f; 
        --gradient-color-3: #00c347;  
        --gradient-color-4: #b024a1;
        --gradient-speed: 0.000006;
      }
    </style>
  </head>
  <body>
    <div class="background--custom">
      <canvas id="canvas" />
    </div>
    <script src="https://cdn.jsdelivr.net/gh/greentfrapp/pocoloco@minigl/minigl.js"></script>
    <script>
    var gradient = new Gradient();
    gradient.initGradient("#canvas");
    </script>
  </body>
</html>

ご覧のようにCDNが含まれるので、場合によっては利用シーンは限られそうです。

基本的には自動生成ですが、微調整等も可能です。サイドプロジェクト何かに使いたいですね。

pocoloco