<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" height="300" viewBox="0 0 516.06 493.58"><g><g><path class="element" d="M258.07,493.58c-8.62-10.82-17.1-21.48-25.58-32.14Q172.61,386.18,112.7,311c-2.14-2.68-2.71-4.15.29-6.75q44.9-39,89.51-78.29c2-1.73,3.15-1.95,5.34-.14,31,25.75,69.8,26.07,100.93.7,3.37-2.74,4.69-.42,6.52,1.18q41.61,36.28,83.15,72.67c8.07,7.06,8,7.11,1.3,15.55L261.24,489.79C260.31,491,259.33,492.08,258.07,493.58Z"/><path class="element" d="M12.88,183.33c5.83-.31,11.57-.71,17.32-.91q66.14-2.25,132.26-4.45c5.49-.18,11-.42,16.46-.76,2.36-.14,3.5.37,3.88,3.09A69.06,69.06,0,0,0,193.59,209c1.95,2.93,1.76,4.63-1,7q-44.55,38.19-88.82,76.71c-3.26,2.84-4.37.84-6.09-1.32q-29.47-37.17-59-74.3c-7.76-9.78-15.55-19.54-23.26-29.35C14.47,186.5,12.94,185.54,12.88,183.33Z"/><path class="element" d="M504,184.21q-11,13.8-22,27.61-31.69,39.87-63.35,79.8c-2.29,2.91-3.62,3.45-6.74.74q-43.91-38.19-88.14-76c-2.14-1.84-2.71-3.1-.95-5.66a69.87,69.87,0,0,0,11.86-30.4c.46-3.32,2.31-3,4.52-2.91q29.94,1.06,59.9,2.11c24.12.86,48.25,1.88,72.38,2.6,10.62.31,21.25,0,31.88,0Z"/><path class="element" d="M0,168.36c4.11-5.7,7.57-10.52,11.06-15.33,19.23-26.58,38.53-53.11,57.62-79.8,2.35-3.28,4-3.67,7.49-1.63q54,31.2,108.32,62c3.23,1.83,4,3.46,2.46,7a57.8,57.8,0,0,0-4.61,18.83c-.23,2.84-1.26,3.8-4.3,3.89-29.8.8-59.61,1.83-89.41,2.72q-41,1.23-81.93,2.31C4.88,168.4,3.05,168.36,0,168.36Z"/><path class="element" d="M516.06,167.85c-11.67,0-22.78.24-33.87,0-26.8-.72-53.6-1.7-80.4-2.55-20.65-.66-41.29-1.34-61.94-1.85-3-.07-4.48-.71-4.73-4a63.9,63.9,0,0,0-5.47-21.16c-1-2.23-.44-3.11,1.52-4.23q55.31-31.52,110.53-63.18c1.79-1,3.07-1.51,4.56.56Q481,119.57,516.06,167.85Z"/><path class="element" d="M436,57.59c-.59,2-2.42,2.35-3.78,3.14q-30.68,17.77-61.41,35.44c-15,8.65-30,17.23-44.94,26-2.75,1.62-4.21,1.78-6.34-1.1a69.47,69.47,0,0,0-22.83-19.84c-2.4-1.3-2.84-2.42-1.72-4.94Q315.6,49.77,336,3.15c1.05-2.4,2.41-3.06,4.9-3,16.49.1,33,.07,49.48,0,1.94,0,3.4.3,4.69,2q19.69,26.76,39.56,53.39C435.12,56.23,435.55,56.94,436,57.59Z"/><path class="element" d="M222.07,98.84c.11,1.78-1,2.26-2,2.85a81.43,81.43,0,0,0-22.91,20.57c-1.59,2-3.15,2.51-5.46,1.15q-26.46-15.55-53-31C120.59,81.87,102.47,71.31,84.18,61c-4.25-2.38-3.77-4.2-1.26-7.53Q101.88,28.4,120.47,3a6.41,6.41,0,0,1,5.78-3q24.5.15,49,0c2.8,0,4.06,1.05,5.14,3.54q20.17,46.2,40.53,92.33C221.37,96.94,221.75,98,222.07,98.84Z"/><path class="element" d="M193.07.35c1.64-.07,2.92-.18,4.19-.18,40.33,0,80.66,0,121-.09,4.35,0,5,.77,3.16,4.84q-18.87,42.39-37.28,85c-1.51,3.47-2.72,4.73-6.88,3.62a71.64,71.64,0,0,0-39,.47c-2.22.64-4,1.39-5.41-1.86C220,62.37,207,32.68,194,3,193.64,2.23,193.44,1.45,193.07.35Z"/></g></g></svg>
</div>
.element{
  fill: #764d85;
}

.element:hover{
 fill: #feab53; 
  cursor: pointer;
}

.wrap{
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 50px;
}

.info{
  position: absolute;
  padding: 20px 30px;
  background: #feab53;
}
class Menu{
  constructor(){
    this.wrap = document.querySelector('.wrap');
    let svg = document.querySelector('svg');
    this.info = document.createElement('div');
    this.info.classList.add('info');
    this.info.innerHTML= `<span>Здесь что-то будет,<br>наверное!</span>`;

    svg.addEventListener('click', e=>this.show(e));
    
  }
  
    show(e){
      let t = e.target;
      if (!t.classList.contains('element')) return;

      let coor = t.getBoundingClientRect();
      let pos = `top: ${coor.top}px; left: ${coor.left}px;`

      this.info.style = pos;

      this.wrap.appendChild(this.info);
    }
}


document.addEventListener('DOMContentLoaded', ()=>{
  let menu = new Menu();
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.