<shader-art autoplay role="img" aria-label="a circular wavy gradient using 6 different configurable colors">
  <uniform type="color" name="color1" value="#66ccee" />
  <uniform type="color" name="color2" value="#0066ff" />
  <uniform type="color" name="color3" value="#ff00cc" />
  <uniform type="color" name="color4" value="#ffffff" />
  <uniform type="color" name="color5" value="#0000cf" />
  <uniform type="color" name="color6" value="#7f00cf" />
  <uniform type="float" name="blur" value="0.1" min="0.0" max="1" step="0.01"/>
  <uniform type="float" name="waviness" value="0.15" min="0" max="1" step="0.01"/>
  <script type="buffer" name="position" data-size="2">
    [-1, 1, -1,-1, 1,1, 1, 1, -1,-1, 1,-1]
  </script>
  <script type="buffer" name="uv" data-size="2">
    [ 0, 0,  0, 1, 1,0, 1, 0,  0, 1, 1, 1]
  </script>
  <script type="vert">
    precision highp float;
    attribute vec4 position;
    attribute vec2 uv;
    varying vec2 vUv;
    varying vec4 vPosition;
    void main() {
      vUv = uv;
      vPosition = position;
      gl_Position = position;
    }
  </script>
  <script type="frag">
    precision highp float;
    varying vec4 vPosition;
    varying vec2 vUv;
    uniform float blur;
    uniform float waviness;
    uniform float time;
    uniform vec3 color1;
    uniform vec3 color2;
    uniform vec3 color3;
    uniform vec3 color4;
    uniform vec3 color5;
    uniform vec3 color6;
    uniform vec2 resolution;
    
    vec3 blend(vec3 a, vec3 b, float t) {
      // a pure linear interpolation like mix(a, b, t) does not work well in rgb space
      return sqrt((1. - t) * pow(a,vec3(2.)) + t * pow(b,vec3(2.)));
    }
    

    vec3 gradient(float x) {

      float s = 6.;
      float b = blur / (s - 1.);
      vec3 color = blend(color6, color1, smoothstep(0., b, x));
      color = blend(color, color2, smoothstep(1./s, 1./s + b, x));
      color = blend(color, color3, smoothstep(2./s, 2./s+b, x));
      color = blend(color, color4, smoothstep(3./s, 3./s+b, x));
      color = blend(color, color5, smoothstep(4./s, 4./s+b, x));
      color = blend(color, color6, smoothstep(5./s, 5./s+b, x));
      return color;
    }
    
    
    
    
    
    // cosine based palette, 4 vec3 params
    vec3 palette(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) {
       return a + b*cos( 6.28318*(c*t+d) );
    }
    
    
    void main() { 
      
      vec2 p = vPosition.xy;
      p.x *= resolution.x / resolution.y;
      float l = length(p.xy);
      
      float x = p.y * 33. + .125 * sin(time * .2) * sin(p.x * 10.) * 20. ;
      l *= clamp(.9 + .2 * waviness * sin(x), 0., 1.);
      vec3 color = gradient(fract(-time * .1 + l));
      gl_FragColor = vec4(color, 1.); 
    }
  </script>
</shader-art>

body {
  display: flex;
  margin:0;
  height: 100vh;
}

shader-art {
  display: block;
  width: 100%;
  height: 100%;
}

shader-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

import { ShaderArt } from 'https://esm.sh/shader-art';
import { UniformPlugin } from 'https://esm.sh/@shader-art/plugin-uniform';

ShaderArt.register([() => new UniformPlugin()]);