Nieregularne kształty jak państwa na mapie na stronie

Witam,
jak w efektywny sposób zrobić nieregularne kształty tworzące jedną całość coś jak mapa. Po kliknięciu w dany fragment, żeby wykonywał jego funkcję i podświetlał ten fragment innym kolorem.

coś takiego:

CSSem widziałem np. mapy europy tak zrobione, ale to jest kilka tysięcy linijek kodu. Może dałoby się jakoś obrazkami odpowiednio umieszczonymi?

Edit: Znalazłem coś takiego jak https://www.image-map.net/ który pozwala łatwo wyznaczyć granice obrazka, jak przetestuje to dam znać czy działa tak jak chciałem

Możesz zrobić kształty w SVG (i wtedy każdy region, to byłaby osobna ścieżka w SVG: https://codepen.io/anon/pen/pQdgMw )
potem możesz to stylować, albo podpiąć zdarzenie pod daną ścieżkę czy inny element.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

canvas

krzywe beziera będą ładniejsze: https://www.w3schools.com/tags/canvas_beziercurveto.asp