Very simple shader showing how to compose a figure and have layers

overlapping-rectangles.frag

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, -s, s, c);
	return m * v;
}

void main() {
    vec2 uv = gl_FragCoord.xy/u_resolution.xy;
    vec2 UV = uv;
    
    uv = uv - vec2(0.470,0.660);
    
    float mask = 1.0;
    
    uv = rotate(uv,2.878*2.);
    
    float x = uv.x;
    float y = uv.y;
    
    mask = step(-0.092,x)*(1.-step(0.380,x))*step(-0.244,y)*(1.-step(0.140,y));
    vec3 r1=mask*vec3(1.,0.,0.); 
    
    uv = UV - vec2(0.530,0.560);
    uv = rotate(uv,0.016*2.);
    
    x = uv.x;
    y = uv.y;
    
    float r2Mask = step(-0.308,x)*(1.-step(0.244,x))*step(-0.276,y)*(1.-step(0.116,y));
    mask +=r2Mask;
    vec3 r2=r2Mask*vec3(0.,1.,0.); 
    
    gl_FragColor =vec4(vec3(mask)*(r1*(1.-r2Mask)+r2),1.0);
}