//https://www.shadertoy.com/view/ldGfWt
float f(float x, float l, float r) {
    // The main idea here is to generate a step function which smoothly blends between the steps
    //
    // We construct a function that periodically goes from 1 to 0 and back to 1 again
    // with a certain wavelength l using a linear ramp, like so:
    //  ___          ____
    //     \        /
    //      \______/
    //
    // which is then passed through a smoothstep function to smoothen the ramp.
    //
    // Parameters:
    //
    //     x: running value (distance along line)
    //     l: wavelength - the distance of a repeated pattern
    //     r: ratio of 1 to 0 values. r = 1.0 makes a solid line. r = 0.0 makes no lines. 
    //     w: the smoothing width, the distance it takes to reach from 0 to 1, and vice versa. 
    //
    // the `w` parameter isn't so useful for horizontal or vertical lines, but is quite useful for 
    // curved or diagonal lines for anti-aliasing. 
    // 
    
    float w = 1.0; // pixel smoothing length hard coded
    
    x = mod(x, l); // doesn't work for negative numbers, replace it with x - l*floor(x/l) if needed. 
    
    //                1 for x = 0..a
    // ramp from 1 to 0 for x = a..b
    //                0 for x = b..c
    // ramp from 0 to 1 for x = c..d
    //                1 for x = d..1
    float a = l*r/2.0 - w/2.0;
    float b = l*r/2.0 + w/2.0;
    float c = l - b;
    float d = l - a;

    // this can probably be made non-branching with some math, but cba right now. 
    if (x < a) {
        x = 1.0;
    } else if (x < b) {
        x = 1.0 - (x - a)/w;
    } else if (x < c) {
        x = 0.0;
    } else if (x < d) {
        x = (x - c)/w;
    } else {
        x = 1.0;
    }
    
    return 1.0 - smoothstep(0.0, 1.0, x);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // repeat vertically
    int N = 13;
    vec2 p = fragCoord.xy;
    int y = int(floor(float(N)*p.y/iResolution.y));
    p.y = mod(p.y, iResolution.y/float(N));
    p.y = p.y - 0.5*iResolution.y/float(N);
    
    // Compose each section separately
    float d;
    if      (y ==  0) d = f(p.x, 20.0, 0.1);
    else if (y ==  1) d = f(p.x, 20.0, 0.2);
    else if (y ==  2) d = f(p.x, 20.0, 0.3);
    else if (y ==  3) d = f(p.x, 20.0, 0.4);
    else if (y ==  4) d = f(p.x, 20.0, 0.5);
    else if (y ==  5) d = f(p.x, 20.0, 0.6);
    else if (y ==  6) d = f(p.x, 20.0, 0.7);
    else if (y ==  7) d = f(p.x, 20.0, 0.8);
    else if (y ==  8) d = f(p.x, 20.0, 0.9);
    else if (y ==  9) d = f(p.x, 20.0, 1.0);
    else if (y == 10) d = min(f(p.x, 20.0, 0.2), f(p.x, 40.0, 0.3));
    else if (y == 11) d = min(f(p.x, 20.0, 0.2), f(p.x, 60.0, 0.3));
    else if (y == 12) d = f(p.x, 6.0, 0.4);
    else              d = 1.0;
    
    // blend vertically
    float s = smoothstep(0.5, -0.5, abs(p.y) - 1.0);
    d = d*s + 1.0*(1.0 - s);
        
    fragColor = vec4(vec3(d),1.0);
}