1. Create a smiley in shader toy

This is the first step in to create a circle function and utilise that to create a shape

private link to shadertoy

float Circle(vec2 uv, vec2 c, float r, float blur){
   float d = length(uv - c);
   // need to smoothstep
   float color = smoothstep(r,r-blur,d);
   return color;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv = uv-0.5;// remapping to center
    // we need x value to be based aspect ratio corrected
    uv.x*= iResolution.x/iResolution.y;
 
    vec3 col = vec3(0.);
     
    float face = Circle(uv, vec2(0.), 0.4, 0.01);
    
    col +=face;
    
    float lEye = Circle(uv, vec2(-0.18,0.1), .1, .01);
    face -= lEye;

    float rEye = Circle(uv, vec2(0.18,0.1), .1, .01);
    face -= rEye;
    
    float mouth = Circle(uv, vec2(0.,0.), .3, .01);
    mouth -= Circle(uv, vec2(0.,0.09), .31, .01);
    
    face -= mouth;
    
    col = vec3(1.,1.,0)*face;
    
   fragColor = vec4(col,1.);
}

Learnings

1. Normalising the pixel coordinates to 0-1 so as to work uniformly on all screens
2. remapping the coordinate system from left bottom to center by subtracting 0.5
3. x axis aspect ratio correction by multiplying with aspect ratio
4. Creating a circle. need to learn aout SDFs
5. its all about adding and subtracting.
6. its hard