Filling in a Bezier Curve SVG

Question

acknowledgement: reference

[SVG] How to close the path (between the 1st and the last point) and fill the area accordingly: It's not a single path, so i can't close it with 'Z' at the end

Answer 1

It's not a single path, so I can't close it with 'Z' at the end

Join the paths first.
E.g. the sample from your link is originally

<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="blue" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300"/>
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" stroke-width="8" d="M 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300"/>

But if you append the dstring of the second to the first and replace the second M (Move) with L (LineTo), you get this:

<path xmlns="http://www.w3.org/2000/svg" fill="cyan" stroke="red" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300 L 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300 Z"/>

I have also set fill=cyan.

Some of these drawn things are from the linked site and not in the code in my answer.