I’m trying to color the inside of a 2D polygon at a fixed distance from its edges, essentially creating an inline effect. The distance and thickness of the color should remain consistent along the entire inner perimeter of the polygon.

Here is an example of the visual result I’m trying to achieve:

I’ve attempted this with the following fragment shader:

uniform float uTime;
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;

void main() {

    const float BORDER_DISTANCE = 0.05;

    if (vUv.x < BORDER_DISTANCE || vUv.x > 1.0 - BORDER_DISTANCE || 
        vUv.y < BORDER_DISTANCE || vUv.y > 1.0 - BORDER_DISTANCE) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
    } 
    else{
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
    }
}

However, the distance from the edges depends on the proportions of the polygon, so it doesn’t work well.