SVG - How to fill a polygon whose sides are formed from bezier curves?

Question

I want to create something like the below using pure SVG but without using a D3 chord or similar functionality.

I am able to create a polygon using bezier curves in SVG using standard path elements. But don't know how to fill that polygon with custom color. How to define the boundary of this polygon and set the fill property?

Any thoughts where grouping can help?

Answer 1

If you want to fill the region, you should use only one path element. You can chain the bezier curves together so that one starts where the last one ended. Then, add Z to the end of the path data to close the path.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
    <path d="M480 150 C 300 200, 200 150, 20 200 C 15 150, 15 150, 20 100 C 200 100, 300 150, 480 150 Z" stroke="black" fill="red"></path>
</svg>

If you know where all of your end points and control points should go, it's no more difficult than making separate paths.

Here's a FIDDLE if you want to play around with the path data and see how the chaining works.