The Shader Lab

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
out vec4 out_color;

void main() {
    // Pixels become aspect-correct coordinates centered on the postcard.
    vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
    vec2 uv = gl_FragCoord.xy / u_resolution;

    // Try changing one of these RGB colors. Each channel is in [0, 1].
    vec3 paper  = vec3(1.000, 0.973, 0.929);
    vec3 cobalt = vec3(0.188, 0.290, 0.859);
    vec3 coral  = vec3(0.894, 0.373, 0.282);
    vec3 gold   = vec3(0.957, 0.737, 0.259);
    vec3 lilac  = vec3(0.647, 0.545, 0.886);

    vec3 color = mix(paper, lilac, 0.14 + 0.24 * uv.y);

    // A circle is a distance test. Change its center or radius.
    vec2 circle_center = vec2(0.13, 0.055);
    float circle_radius = 0.275;
    float distance_to_circle = length(p - circle_center);
    float circle = 1.0 - smoothstep(
        circle_radius - 0.003,
        circle_radius + 0.003,
        distance_to_circle
    );
    color = mix(color, gold, circle);

    // step makes a two-color stripe; time only changes its phase.
    float stripe = step(0.52, fract((p.x + p.y) * 6.5 + u_time * 0.08));
    float strip_region = 1.0 - smoothstep(0.145, 0.150, abs(p.y + 0.10));
    vec3 stripe_color = mix(paper, cobalt, stripe);
    color = mix(color, stripe_color, strip_region);

    // A second, smaller circle sits in front of the stripes.
    float small_circle = 1.0 - smoothstep(
        0.067, 0.071, length(p - vec2(-0.27, 0.17))
    );
    color = mix(color, coral, small_circle);

    // A thin cobalt horizon finishes the composition.
    float horizon = 1.0 - smoothstep(0.002, 0.004, abs(p.y + 0.34));
    color = mix(color, cobalt, horizon * 0.55);

    out_color = vec4(color, 1.0);
}