GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

レインボーグラデーション 9パターン — キャンバスで作るプラズマ背景

· Godrich · 9種 · 13分で読める

クリエイティブUI素のJS自動再生ヒーローLP

レインボーグラデーションは固定のCSS色帯ではなく、キャンバスが毎フレーム計算し直す色そのものです。光よ、お前にはもともと色がない。01番は三つの正弦波を重ねてお前に色をつけ、05番は二つの塊が触れる場所でお前を混ぜ合わせ、09番はヒーロー画面全体にお前を広げる。

古典プラズマ・サイン波01 plasma-sine-field-classic ノイズ色相フロー02 plasma-noise-hue-flow ポインター追従カラーリップル03 plasma-pointer-ripple-distort 放射状カラーバースト04 plasma-radial-hue-burst メタボール色にじみ05 plasma-metaball-color-blend スキャンライン色ずれ06 plasma-scanline-chroma-shift グラデーション帯の階段化07 plasma-gradient-band-posterize フローフィールド粒子ドリフト08 plasma-flow-particle-drift ヒーロー背景シーン09 plasma-hero-background-scene

自動再生 · タイルを押すとその項目へ · すべて1つのzip

この記事は虹色グラデーション 作り方を、CSSの色帯ではなくキャンバスのピクセル計算から解説します。この9種はどれも一度描いたグラデーションをそのまま使い回しません。renderField() が160×100のオフスクリーンバッファを毎フレーム1ピクセルずつ巡回し、サイン波・ノイズ・ブロブまでの距離のどれか(または組み合わせ)から色相を求め、hslToRgb() で変換した値を createImageData()/putImageData() でそのまま書き込みます。draw() がその結果を480×300の表示用キャンバスへ拡大するところまでが共通の仕組みです。

実際にどこで使うのが向いているか

9種のうち5種は、触られなくても成立する背景として使えます。01番の古典的なマーブル模様と09番のまとめ背景はランディングページのヒーローやローディング画面に、02番の雲のような漂いはテキストの邪魔をしないカード背景やセクション区切りに、04番の輪の放射はイベントバナーや通知の強調に、06番のスキャンライン色ずれはレトロ系コンセプトページや音楽サイトに向いています。

残り4種はインタラクションが前提です。03番のリップルはポインターが実際に動いてこそ意味があるので、インタラクティブなヒーローやLP向けです。05番のドラッグ可能な塊はポートフォリオ背景やブランド紹介ページで、来訪者自身が色を触って混ぜる体験がそのまま見せ場になり、虹色グラデーションロゴの配色実験にも応用できます。07番の帯数スライダーは背景というより小さなツールに近く、ポスター風セクションやアートワークページで帯数を変えて見せる用途が合います。08番の粒子の軌跡はダッシュボード背景や待機画面に向いていて、01番や04番ほど強い色相を出さずに「まだ動いている」ことだけを伝えます。

01古典プラズマ・サイン波

01番は横方向・縦方向・斜め方向・中心からの半径方向という4つの Math.sin() を足し合わせ、その合計値をそのまま色相に変換して毎フレーム画面全体を塗り直します。正弦波を三つ重ねて毎フレーム画面全体の色を計算し直す、昔ながらのプラズマ効果です。PLASMA_SINE_FREQ_X・_Y・_R の値が、単調な流れではなく古典的な大理石模様を作り出しています。

古典プラズマ・サイン波
新しいタブで開く

01 · 古典プラズマ・サイン波 — 計測 累積面積 75.243% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

renderFieldhslToRgbPLASMA_SINE_FREQ_X
  function renderField(t) {
    var cx = CALC_W / 2, cy = CALC_H / 2;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - cx, dy = y - cy;
        var v = Math.sin(x * PLASMA_SINE_FREQ_X + t * PLASMA_TIME_SPEED)
              + Math.sin(y * PLASMA_SINE_FREQ_Y - t * PLASMA_TIME_SPEED * 0.8)
              + Math.sin((x + y) * PLASMA_SINE_FREQ_R * 0.7 + t * PLASMA_TIME_SPEED * 1.2)
              + Math.sin(Math.sqrt(dx * dx + dy * dy) * PLASMA_SINE_FREQ_R - t * PLASMA_TIME_SPEED * 1.5);
        var hue = (v / 4) * 180 + 180 + t * PLASMA_TIME_SPEED * 40;
        var rgb = hslToRgb(hue, 0.68, 0.55);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }

測定値: 面積の75.2%が毎ループ塗り替わり、強度平均は62.4、サンプリングした23/23 フレームで変化が確認できました。

02ノイズ色相フロー

02番は valueNoise2D() を2つの異なるスケールで1ピクセルごとに2回サンプリングし、その2値を色相と明度にブレンドします。01番の鋭い大理石模様と違い、ゆっくり流れる雲のような見た目になります。PLASMA_NOISE_SCALE はノイズの1マスが何ピクセル分にあたるかを決める値で、下の変形では40から160へ伸ばして小さな粒を幅広くゆっくり動く雲の形に変えています。

ノイズ色相フロー
新しいタブで開く

02 · ノイズ色相フロー — 計測 累積面積 74.738% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_NOISE_SCALEvalueNoise2DseedRand
  function renderField(t) {
    var tt = t / 1000;
    var ox = tt * PLASMA_FLOW_SPEED, oy = tt * PLASMA_FLOW_SPEED * 0.6;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var n1 = valueNoise2D(x / PLASMA_NOISE_SCALE + ox, y / PLASMA_NOISE_SCALE * 0.8 + oy);
        var n2 = valueNoise2D(x / PLASMA_NOISE_SCALE * 2.3 - oy, y / PLASMA_NOISE_SCALE * 2.3 + ox);
        var hue = (n1 * 0.7 + n2 * 0.3) * 360 + tt * 30;
        var light = 0.4 + n2 * 0.2;
        var rgb = hslToRgb(hue, 0.6, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }

測定値: 面積の74.7%が毎ループ塗り替わり、強度平均は28.7、サンプリングした23/23 フレームで変化が確認できました。

03ポインター追従カラーリップル

03番は全ピクセルからポインター(未接続時は virtualPointerOrbit() が返す仮想の軌道)までの距離を測り、その距離を減衰するサイン波に変換して、色をサンプリングする位置そのものをずらしながら色相も同時に動かします。ポインターの位置を中心に色の波が広がり、画面をゆがませる仕組みです。PLASMA_RIPPLE_AMP は波の頂点でピクセルがどれだけ押し出されるかを決めます。

ポインター追従カラーリップル
新しいタブで開く

03 · ポインター追従カラーリップル — 計測 累積面積 66.851% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_RIPPLE_AMPvirtualPointerOrbitcalcFromEvent
  function renderField(t) {
    var p = pointerActive ? realPointer : (reduce ? { x: -999, y: -999 } : virtualPointerOrbit(t));
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - p.x, dy = y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy) || 0.0001;
        var wave = Math.sin(dist * PLASMA_RIPPLE_FREQ - t * PLASMA_RIPPLE_SPEED);
        var atten = Math.exp(-dist * PLASMA_RIPPLE_DECAY);
        var disp = wave * atten * PLASMA_RIPPLE_AMP;
        var bx = x + (dx / dist) * disp, by = y + (dy / dist) * disp;
        var hue = bx * 1.6 + by * 1.6;
        var light = 0.48 + wave * atten * 0.16;
        var rgb = hslToRgb(hue, 0.64, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }

測定値: 面積の66.9%が毎ループ塗り替わり、強度平均は32.1、サンプリングした23/23 フレームで変化が確認できました。

04放射状カラーバースト

04番は画面中央からの距離をそのまま色相に変換し、同じ距離にサイン波を重ねて明暗の輪を交互に打ち抜きます。画面中央から色の輪が放射状に広がり、一定間隔で繰り返される仕組みです。PLASMA_RING_FREQ が輪の本数を、PLASMA_RING_SPEED が広がる速さを決めます。

放射状カラーバースト
新しいタブで開く

04 · 放射状カラーバースト — 計測 累積面積 75.385% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_RING_FREQPLASMA_RING_SPEEDrenderField
  function renderField(t) {
    var cx = CALC_W / 2, cy = CALC_H / 2;
    var tt = t / LOOP_MS;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var dx = x - cx, dy = y - cy;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var ringPhase = dist * PLASMA_RING_FREQ - tt * PLASMA_RING_SPEED;
        var hue = ringPhase * 360;
        var light = 0.4 + 0.2 * Math.sin(ringPhase * Math.PI * 6);
        var rgb = hslToRgb(hue, 0.7, light);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

測定値: 面積の75.4%が毎ループ塗り替わり、強度平均は60.9、サンプリングした23/23 フレームで変化が確認できました。

05メタボール色にじみ

05番は各ブロブの重みを PLASMA_BLOB_RADIUS_PX² / (距離² + PLASMA_BLOB_RADIUS_PX × 2) の2乗として求め、その重みで全ブロブのRGB値をブレンドします。色の異なる二つの塊が近づくと、触れ合う場所から色が混ざり合う見た目です。nearestBlobIndex() がポインターでドラッグする対象のブロブを選びます。

メタボール色にじみ
新しいタブで開く

05 · メタボール色にじみ — 計測 累積面積 60.035% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_BLOB_RADIUS_PXnearestBlobIndexupdateBlobs
  function renderField(t) {
    updateBlobs(t);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var sw = 0, rr = 0, gg = 0, bb = 0;
        for (var k = 0; k < blobs.length; k += 1) {
          var bo = blobs[k];
          var dx = x - bo.x, dy = y - bo.y;
          var d2 = dx * dx + dy * dy;
          var w = (PLASMA_BLOB_RADIUS_PX * PLASMA_BLOB_RADIUS_PX) / (d2 + PLASMA_BLOB_RADIUS_PX * 2);
          w = w * w;
          sw += w; rr += bo.rgb[0] * w; gg += bo.rgb[1] * w; bb += bo.rgb[2] * w;
        }
        offBuf[idx] = rr / sw; offBuf[idx + 1] = gg / sw; offBuf[idx + 2] = bb / sw; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }
  }

測定値: 面積の60.0%が毎ループ塗り替わり、強度平均は18.8、サンプリングした22/23 フレームで変化が確認できました。

06スキャンライン色ずれ

06番は各行ごとに横方向のずれ量と色相のオフセットを先に計算してから、その行のピクセルをループします。PLASMA_ROW_SHIFT_PX が行のx方向サンプリング位置を横にずらし、PLASMA_ROW_HUE_STEP が上の行との色相差を作ります。横一列ごとに色を少しずつずらし、古いブラウン管のような色にじみを作る仕組みで、9種の中でも一目でレインボーグラデーションの水平の帯だと分かる見た目です。

スキャンライン色ずれ
新しいタブで開く

06 · スキャンライン色ずれ — 計測 累積面積 75.342% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_ROW_HUE_STEPPLASMA_ROW_SHIFT_PXrenderField
  function renderField(t) {
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      var rowShift = Math.sin(y * 0.35 + t * PLASMA_ROW_SPEED) * PLASMA_ROW_SHIFT_PX;
      var rowHue = y * PLASMA_ROW_HUE_STEP + t * PLASMA_ROW_SPEED * 30;
      var rowLight = 0.44 + 0.1 * Math.sin(y * 0.6);
      for (var x = 0; x < CALC_W; x += 1) {
        var xs = x + rowShift;
        var hue = rowHue + xs * 1.2;
        var rgb = hslToRgb(hue, 0.7, rowLight);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }

測定値: 面積の75.3%が毎ループ塗り替わり、強度平均は31.6、サンプリングした23/23 フレームで変化が確認できました。

07グラデーション帯の階段化

07番はまず斜め方向になめらかな色相を計算し、そのあとに posterizeHue() が360度を PLASMA_BAND_COUNT 等分して各ピクセルの色相をその区間の中央値へ丸め込みます。なめらかな色の変化を一定間隔で区切り、色の帯が何本も見えるようにする仕組みです。画面上のレンジ入力が PLASMA_BAND_COUNT を3から24までリアルタイムに動かします。

グラデーション帯の階段化
新しいタブで開く

07 · グラデーション帯の階段化 — 計測 累積面積 73.538% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_BAND_COUNTposterizeHuerenderField
  function posterizeHue(raw, bands) {
    var step = 360 / bands;
    return Math.floor(raw / step) * step + step / 2;
  }

  function renderField(t) {
    var diag = t * 0.03;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var raw = (x * 1.4 + y * 1.1 + diag) % 360;
        var hue = posterizeHue(raw, PLASMA_BAND_COUNT);
        var rgb = hslToRgb(hue, 0.68, 0.5);
        offBuf[idx] = rgb[0]; offBuf[idx + 1] = rgb[1]; offBuf[idx + 2] = rgb[2]; offBuf[idx + 3] = 255;
        idx += 4;
      }
    }

測定値: 面積の73.5%が毎ループ塗り替わり、強度平均は77.3、サンプリングした23/23 フレームで変化が確認できました。

08フローフィールド粒子ドリフト

08番はバッファ全体の塗り替えをやめ、PLASMA_PARTICLE_COUNT 個の粒子を valueNoise2D() の方向場の中で動かします。小さな粒子が目に見えない流れに沿って漂い、通った跡に色を残す仕組みで、各粒子は自分の位置のノイズ値を角度として読み取って一歩進み、前フレームは消去されずに PLASMA_FADE_ALPHA で薄く残ります。

フローフィールド粒子ドリフト
新しいタブで開く

08 · フローフィールド粒子ドリフト — 計測 累積面積 30.433% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

PLASMA_PARTICLE_COUNTstepSimvalueNoise2D
  function stepSim(dtMs) {
    octx.fillStyle = 'rgba(12,14,22,' + PLASMA_FADE_ALPHA + ')';
    octx.fillRect(0, 0, CALC_W, CALC_H);
    flowT += dtMs * 0.00035;
    var dtS = dtMs / 1000;
    for (var i = 0; i < particles.length; i += 1) {
      var p = particles[i];
      var ang = valueNoise2D(p.x * PLASMA_FLOW_SCALE + flowT, p.y * PLASMA_FLOW_SCALE) * Math.PI * 4;
      p.x += Math.cos(ang) * PLASMA_SPEED_PX_S * dtS;
      p.y += Math.sin(ang) * PLASMA_SPEED_PX_S * dtS;
      if (p.x < 0) p.x += CALC_W; if (p.x >= CALC_W) p.x -= CALC_W;
      if (p.y < 0) p.y += CALC_H; if (p.y >= CALC_H) p.y -= CALC_H;
      var hue = (ang * 57.3 + p.hueSeed + flowT * 40) % 360;
      octx.fillStyle = hslToRgb(hue, 0.75, 0.58);
      octx.fillRect(p.x - 0.6, p.y - 0.6, 1.6, 1.6);

測定値: 面積の30.4%が毎ループ塗り替わり、強度平均は64.3、サンプリングした23/23 フレームで変化が確認できました。

09ヒーロー背景シーン

09番は01番の4波サイン合成をベースの色相として使い続けながら、HERO_BLOB_RADIUS_PX の大きさで漂う色のブロブを05番と同じ2乗重み式でブレンドします。上記の技法をひとつにまとめ、ヒーローセクション全体を埋める背景シーンに仕上げる項目で、新しい計算式を持ち込むのではなく、既存の二つを重ねているだけです。

ヒーロー背景シーン
新しいタブで開く

09 · ヒーロー背景シーン — 計測 累積面積 72.383% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

HERO_BLOB_RADIUS_PXrenderFieldhslToRgb
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var v = Math.sin(x * PLASMA_SINE_FREQ_X + tt) +
          Math.sin(y * PLASMA_SINE_FREQ_Y + tt * 1.3) +
          Math.sin((x + y) * PLASMA_SINE_FREQ_R * 0.5 + tt * 0.7) +
          Math.sin(Math.sqrt((x - 80) * (x - 80) + (y - 50) * (y - 50)) * PLASMA_SINE_FREQ_R - tt);
        var baseHue = (v / 4) * 180 + 200 + tt * 8;
        var baseRgb = hslToRgb(baseHue, 0.55, 0.4);

        var sr = baseRgb[0], sg = baseRgb[1], sb = baseRgb[2], sw = 1;
        for (var k = 0; k < blobs.length; k += 1) {
          var dx = x - bcx[k], dy = y - bcy[k];
          var d2 = dx * dx + dy * dy;
          var R2 = HERO_BLOB_RADIUS_PX * HERO_BLOB_RADIUS_PX;
          var w = R2 / (d2 + R2 * 2);
          w = w * w * 3.2;
          sr += blobs[k].rgb[0] * w;
          sg += blobs[k].rgb[1] * w;
          sb += blobs[k].rgb[2] * w;
          sw += w;
        }

測定値: 面積の72.4%が毎ループ塗り替わり、強度平均は28.9、サンプリングした23/23 フレームで変化が確認できました。

3つの値を動かしてどこまで表情が変わるか試す

変形 値の変化 見え方
ノイズスケール値を調整する 02 PLASMA_NOISE_SCALE 40 → 160 値を小さくするとノイズが細かくなり粒の小さな色ムラになり、値を大きくするとノイズが粗くなり雲のような大きくゆっくりした色の塊になります。
メタボール半径値を調整する 05 PLASMA_BLOB_RADIUS_PX 60 → 200 値を小さくすると二つの塊がかなり近づかないと色が混ざらず、値を大きくすると離れていても早くから色がにじんで混ざります。
粒子数値を調整する 08 PLASMA_PARTICLE_COUNT 80 → 400 値を小さくすると粒子がまばらで流れの線が薄く見え、値を大きくすると粒子が密になり画面全体が色で満ちた流れのように見えます。

9種のプラズマ・レインボーフィールドを1フレームずつ測る

項目 面積% 強度 変化フレーム
01 plasma-sine-field-classic 75.2 62.4 23/23
02 plasma-noise-hue-flow 74.7 28.7 23/23
03 plasma-pointer-ripple-distort 66.9 32.1 23/23
04 plasma-radial-hue-burst 75.4 60.9 23/23
05 plasma-metaball-color-blend 60.0 18.8 22/23
06 plasma-scanline-chroma-shift 75.3 31.6 23/23
07 plasma-gradient-band-posterize 73.5 77.3 23/23
08 plasma-flow-particle-drift 30.4 64.3 23/23
09 plasma-hero-background-scene 72.4 28.9 23/23

08番だけ30.4%と大きく低い理由は、粒子が占める小さな四角と薄いフェード層しか塗り替えないからで、他の8種のようにバッファ全体を毎フレーム再計算していません。強度が最も高いのは07番の77.3で、posterizeHue() が隣り合うピクセルを別々の帯の中心値へ一気に丸め込むため、サイン波やノイズの計算よりも一段大きな色の飛びが生まれます。23/23にならない唯一の例外が05番で、漂う二つのブロブの色がサンプリングした1フレームでたまたま近づきすぎ、ピクセル差分の判定が「変化なし」と読んだため22/23になっています。

レインボーグラデーションが壊れる境界

どの項目も160×100のバッファを renderField() で1ピクセルずつ巡回してから draw() が drawImage() で拡大しているだけなので、このサイズなら軽いのですが、同じループをフルHDのヒーローセクションにそのまま当てはめると Math.sin()・Math.sqrt()・valueNoise2D() の呼び出し回数が百倍以上に膨らみます。低スペック端末で最初にコマ落ちしやすいのは05番や09番で、どちらも1ピクセルごとに全ブロブの重みを合計する分、1ピクセル1回で済む01番・04番・06番・07番より負荷が高くなります。各 index.html/style.scss を守る29beunjpをこの段落に置いたのは意図的です — ここまで読めば、9種をすべて開く前にどれから負荷を確認すべきか見当がつきます。アニメーションではなく1枚の静止画だけで十分な場合は、どの項目も普通の <canvas> 要素なので、右クリックしてレインボーグラデーションの画像として保存できます。

reduced-motion が止めるもの・止めないもの

prefers-reduced-motion: reduce はどの項目でも is-demo クラスを外して requestAnimationFrame() のループを止めますが、フレーム0で止めるのではなく自分の LOOP_MS サイクルの中間で静止するので、モーションに敏感な読者にもその模様の典型的な見た目が伝わります。07番のレンジ入力だけは reduced-motion 下でも通常どおりキーボード操作を受け付けます — input イベントが PLASMA_BAND_COUNT を直接動かすためで、9種の中で唯一の実質的なキーボード操作経路です。05番は少し違う挙動で、待機中のブロブの漂いは他の項目と同じく止まりますが、ドラッグ操作はポインターイベントから draw() を直接呼ぶため、モーションを抑えた状態でも色の混ざりは操作できたままです。03番のリップルにはキーボードの代替はなく、reduced-motion が有効になるとポインター位置が { x: -999, y: -999 } に置き換わってキャンバス外へ完全に外れます。putImageData() と requestAnimationFrame()、そして prefers-reduced-motion メディアクエリ自体は、いずれもMDNに仕様が載っています。

虹色グラデーションを他の作例とどう使い分けるか

固定のCSSグラデーションや、書き出し済みのレインボーグラデーションロゴのようなGIF・画像は、色があらかじめ決まっている点で今回の9種と根本的に違います。上の9種はどれも t・ポインター位置・ノイズ値からその場で色相を計算し直すので、この記事に出てきた PLASMA_SINE_FREQ_X・PLASMA_NOISE_SCALE・PLASMA_RIPPLE_AMP などの定数は書き出し直しなしにあとから調整できます。近いキャンバス技法としては、ピクセル単位の歪みを扱うhtml5 canvas アニメーション9種 — 水滴とブラックホール、08番の粒子の軌跡と特に近いパーティクル アニメーション canvas 9種 — ライブラリなしの作り方、CSSのグラデーションとブレンドモードで虹色に近い光沢を作るCSS ホログラムカード効果9選 — ステッカー・バッジ・チケットを参考にしてください。

虹色グラデーションについてよくある質問に答えます

9種のどれかで画像を読み込んだりライブラリを使ったりしていますか

いいえ。すべて生成的なキャンバス計算だけで成り立っています。hslToRgb() と、02番・08番・09番で使う seedRand() 駆動のノイズやブロブ配置が入力のすべてで、9つのファイルのどこにもアップロード画像や外部ライブラリはありません。

フルサイズで動かしたとき一番負荷が大きいのはどれですか

面積では04番が75.4%と最大ですが、1ピクセルあたりの負荷という意味では07番のほうが重いです。強度77.3は posterizeHue() が帯の色を滑らかにつながず一気に切り替えるために生じていて、01〜06番のようになめらかに変化しないぶん、大きなヒーローセクションで最初に負荷を確認すべき項目です。

レインボーグラデーション フリー素材として使うなら彩度を落として虹色グラデーション パステル寄りにできますか

はい。どの項目も最終的な色は hslToRgb(hue, S, L) の1回の呼び出しで決まるので、たとえば01番が現在渡している彩度0.68をおよそ0.3前後まで下げ、明度を0.75前後まで上げれば、ループ・周波数・半径の値には一切触れずに同じ色相計算のままパステル調に変えられます。ダウンロードしたzip自体はフリー素材として無料で使えます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。