I create a geometry from Bezier curves, like so:

```
function makeGeom(curves) {
let threeShape = new THREE.Shape();
for (let c = 0; c < curves.length; c++) {
var bez = curves[c];
threeShape.moveTo(bez.x[0], bez.y[0]);
threeShape.bezierCurveTo(bez.x[1], bez.y[1], bez.x[2], bez.y[2], bez.x[3], bez.y[3]);
}
return new THREE.ShapeBufferGeometry(threeShape);
}
...
makeGeom([
{ x: [53.65, 169.75, 73, 138.15], y: [-51.8, -7.2, -67.5, -51.8] },
{ x: [138.15, 138.15, 138, 138], y: [-51.8, -51.8, -65.5, -65.5] },
{ x: [138, 125.45, 53.65, 53.65], y: [-65.5, -74.85, -135.3, -135.3] },
{ x: [53.65, 53.65, 53.65, 53.65], y: [-135.3, -135.3, -51.8, -51.8] }])
```

here are my shaders:

```
<script type="x-shader/x-vertex" id="vert_uv">
out vec2 ouv;
void main() {
ouv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script type="x-shader/x-fragment" id="frag_RadialGradient">
in vec2 ouv;
void main()
{
gl_FragColor = vec4(ouv.x, 0.0, ouv.y, 1.0);
}
</script>
```

Judging by the look of it, UVs do not change across the shape, I’m not sure why.

Here is the fiddle:

https://jsfiddle.net/tfoller/k1djytpf/36/