그라데이션 메시 팔레트

<div class="wrap">
  <canvas id="cv" width="480" height="220"></canvas>
  <div class="sws" id="sws"></div>
</div>

.wrap{width:min(480px,94%);display:grid;gap:8px}
canvas{width:100%;height:auto;aspect-ratio:16/8;border-radius:16px;border:1px solid var(--line);display:block}
.sws{display:flex;gap:6px;justify-content:center}
.sws div{display:grid;gap:3px;justify-items:center}
.sws i{display:block;width:clamp(16px,4vmin,22px);height:clamp(16px,4vmin,22px);border-radius:6px;border:1px solid var(--line)}
.sws b{font:700 clamp(6px,1.6vmin,8px)/1 ui-monospace,monospace;color:var(--muted)}

var PALETTES = [
  ['#5b5bf7', '#f25c8a', '#18c29c', '#facc15'],
  ['#f97316', '#ec4899', '#8b5cf6', '#22d3ee'],
  ['#0ea5e9', '#a3e635', '#f43f5e', '#fbbf24'],
];
var idx = 0;
var cv = document.getElementById('cv'), ctx = cv.getContext('2d');
var W = cv.width, H = cv.height;
var sws = document.getElementById('sws');
function layout() {
  sws.innerHTML = PALETTES[idx].map(function (h, i) { return '<div><i id="s' + i + '"></i><b>' + h + '</b></div>'; }).join('');
}
layout();
var t = 0;
function pos(i, n) {
  var a = t * 0.4 + i * (Math.PI * 2 / n);
  return [W * (0.5 + 0.34 * Math.cos(a)), H * (0.5 + 0.34 * Math.sin(a * 1.3))];
}
function draw() {
  ctx.clearRect(0, 0, W, H);
  ctx.filter = 'blur(46px)';
  var colors = PALETTES[idx];
  colors.forEach(function (hex, i) {
    var p = pos(i, colors.length);
    var r = W * 0.5;
    var g = ctx.createRadialGradient(p[0], p[1], 0, p[0], p[1], r);
    g.addColorStop(0, hex);
    g.addColorStop(1, 'transparent');
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(p[0], p[1], r, 0, Math.PI * 2);
    ctx.fill();
  });
}
(function tick() {
  t += 0.01;
  draw();
  requestAnimationFrame(tick);
})();
setInterval(function () { idx = (idx + 1) % PALETTES.length; layout(); }, 3400);