title: How to create a mutli-step radial gradient Fragment shader
body: <p>I'm using some shader code to create multi-step linear gradients by mixing colors. It works great. I have a radial shader which uses distance. Works fine but I dont know to adapt it to multi-step. </p>
  
  <p>How could I approach it?</p>
  
  <p><strong>Linear Gradient</strong> <a href="http://glslsandbox.com/e#39992.0" rel="nofollow noreferrer">http://glslsandbox.com/e#39992.0</a></p>
  
  <pre><code>uniform float time;
  uniform vec2 mouse;
  uniform vec2 resolution;
  
  void main( void ) {
  
      float y = gl_FragCoord.y / resolution.y;
  
      vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
      vec4 green = vec4(0.0, 1.0, 0.0, 1.0);
      float step1 = 0.0;
      float step2 = 0.33;
      float step3 = 0.66;
      float step4 = 1.0;
  
      vec4 color = mix(white, red, smoothstep(step1, step2, y));
      color = mix(color, blue, smoothstep(step2, step3, y));
      color = mix(color, green, smoothstep(step3, step4, y));
  
      gl_FragColor = color;
  
  }
  </code></pre>
  
  <p><strong>Simple radial gradient</strong> <a href="https://www.shadertoy.com/view/4tjSWh" rel="nofollow noreferrer">https://www.shadertoy.com/view/4tjSWh</a></p>
  
  <pre><code>void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
  
      float d = distance(iResolution.xy*0.5,fragCoord.xy)*(sin(1.0)+1.5)*0.003;
      fragColor = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(0.0, 0.0, 0.0, 1.0), d);
  }
  </code></pre>