I like this demo. Very pleasing on the eyes.
To easily create WebGL demos the author created a little library called RGBA.js which is used under the hood.
Focusing on hiding WebGL/JavaScript code from you and giving ability to write fragment shader code only
Once included, this is the only code one has to write:
RGBA(`
float channel(vec2 p, float t) {
float a = atan(p.x, -p.y);
float w = sin(a*8.0 + t*2.0)*sin(t+a);
float d = length(p) - w*0.013 * smoothstep(0.85, 1.4, abs(a*0.5));
d = abs(d - 0.25);
return smoothstep(0.005, 0.0005, d);
}
void main() {
vec2 p = gl_FragCoord.xy/resolution-0.5;
p.x *= resolution.x/resolution.y;
gl_FragColor = vec4(
channel(p, time*0.7),
channel(p, time*0.9+1.0),
channel(p, time*1.1+2.0),
1.0);
}
`);
More demos in this CodePen Collection