pocoloco
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が含まれるので、場合によっては利用シーンは限られそうです。
基本的には自動生成ですが、微調整等も可能です。サイドプロジェクト何かに使いたいですね。