Fill a div with a wavy border SVG path

Question

I want to fill the

with the color and add shadow to the border but my code is doing this. I actually need it in the way shown in the image.

Answer 1

In your code, you where creating several path elements where each element had one curveTo subpath. Instead, you need one path element with several curveTo subpaths. In your scenario, the simpler quadratic Bezier curve will work well. After the curveTo subpaths, you will need some lineTo subpaths to define the area under the curves. For example...