アニメーションパターンジェネレーター
ブラウザ上で光のアニメーションパターンを作成。ラインを曲げ、色を決めて、シームレスなループをMP4、WebM、GIF、PNG、ライブコードで書き出せます。無料。
ルックから始める
ラインの形を整える
背景が透明なPNGまたはSVGが最適です。ファイルはお使いの端末から出ません。
画面上の4つのノードをドラッグすると、ラインが曲がります。
画面をドラッグして、パターンの中心を動かします。
色を選ぶ
ラインの色動きを設定する
ルックを仕上げる
印刷エフェクト書き出し
画面に表示中のフレームを書き出します。別のフレームにするには、タイムスライダーを動かしてください。
お使いのブラウザは動画のエンコードに対応していません。最新のChrome、Edge、Firefox、Safariを使うか、GIFで書き出してください。
GIFは256色までです。なめらかなグラデーションや小さなファイルが必要なら、動画で書き出してください。
このコードを任意のWebページに貼り付けると、パターンがライブで動きます。ライブラリは不要で、どんなサイズでも鮮明に表示され、画面外では停止します。
テキストとロゴのパターンは、まだコードとして動かせません。動画または画像で書き出してください。
この形式は透明に対応していないため、背景色が使われます。
このツールにはWebGL 2が必要ですが、お使いのブラウザまたは端末で無効になっています。ブラウザの設定でハードウェアアクセラレーションをオンにするか、別のブラウザをお試しください。
お使いの端末上で作成され、何もアップロードされません。
Saved designs
0アニメーションパターンジェネレーターについて
アニメーションパターンジェネレーターは、動く光のパターンを作れる無料のスタジオです。色のラインはグラフィックスカードでリアルタイムに描画されるので、変更はすぐに反映されます。扇、トンネル、スパイラル、フラワー、等高線マップ、回る地球儀、回路チップなど、多彩なパターンを用意。完成したルックから始めて、ラインと色と動きを調整し、ブランドにぴったりのパターンに仕上げましょう。
ラインを手で曲げたり、好きな文字やロゴの輪郭に沿って走らせたり、画像からパレットを取り込んだり、ブランドカラーを貼り付けたりできます。アニメーションはすべて整数サイクルで作られているため、最後のフレームがそのまま最初のフレームにつながり、ループが途切れることはありません。
MP4またはWebMの動画(最大4K)、GIF、PNG、JPG、WebPの静止画(最大8K)を書き出せます。形式が対応していれば背景は透明にできます。ライブラリ不要で、どんなWebサイトでもパターンを動かせるライブコードもコピーできます。すべてお使いの端末上で処理され、何もアップロードされません。
アニメーションパターンジェネレーターの使い方
- スタート地点にするルックを選ぶか、「おまかせ」を押して新しいデザインを作ります。
- パターンを選んで、ラインを調整します。画面をドラッグして中心を動かすか、文字を入力してその周りにラインを走らせます。
- パレットを選ぶか、hexコードを貼り付けるか、画像から色を取り込みます。
- 動き、ループの長さ、速さを設定し、グロー、3Dチューブ、フルーテッドガラス、フィルムグレインでルックを仕上げます。
- フレームの形を選びます。16:9、正方形、縦長、ストーリー、バナー、またはカスタムサイズから選べます。
- 動画、GIF、画像として書き出すか、コードをコピーしてWebサイトでライブ表示します。