How to make a map with curved edges?

Question

css

Good afternoon. The designer drew such a map


. I made it up. On top of the map I placed a svg with a transparent area. Everything looks like on the layout, but this option is not usable. Do nothing with the card.

Is it possible to somehow implement such a design so that the map is usable?

There was an idea to use two more pictures, but in this case, still most of the map is not clickable.

Answer 1

Add overlay styles - it will be possible to interact with the map. And the designer gets a bad mark, any creative should not run counter to usability. pointer-events: none;