JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path 
    class="segment"
    id="segment_r" 
    d="M600.5,104.1c-276.1,0-500,223.9-500,500h100c0-220.9,179.1-400,400-400s400,179.1,400,400h100c0-276.1-223.9-500-500-500Z"
    data-d="M630.4,105l-29.9-29.9L570.6,105c-262.2,15.5-470.1,233-470.1,499.1h100c0-220.9,179.1-400,400-400
	s400,179.1,400,400h100C1100.5,338,892.6,120.4,630.4,105z"
  />
  <path 
    class="segment"
    id="segment_g"
    d="M600.5,1004.1v100c276.1,0,500-223.9,500-500h-100c0,220.9-179.1,400-400,400Z"
    data-d="M974.6,935.9c78.4-88.3,125.9-204.5,125.9-331.8h-100c0,220.9-179.1,400-400,400v100
	c127.3,0,243.5-47.6,331.8-125.9h42.3V935.9z"
  />
  <path 
    class="segment"
    id="segment_b" 
    d="M200.5,604.1H100.5c0,276.1,223.9,500,500,500v-100c-220.9,0-400-179.1-400-400Z"
    data-d="M600.5,1004.1c-220.9,0-400-179.1-400-400h-100c0,127.3,47.6,243.5,125.9,331.8v42.3h42.3
	c88.3,78.4,204.5,125.9,331.8,125.9V1004.1z"
  />
</svg>

CSS

SVG {
 display: block;
 width: 300px;
 margin: 0 auto;
}

PATH {
  fill: gray;
  stroke: #000;
  stroke-miterlimit: 10;
}

PATH:hover {
  cursor: pointer;
}

PATH#segment_r:hover {
  fill: red;
}

PATH#segment_g:hover {
  fill: green;
}

PATH#segment_b:hover {
  fill: blue;
}

JavaScript

// on ready
$(function() {

  // on any segment mouse enter path
  $('.segment').on('mouseenter',function(e) {
  
    // temporally store hover-state data-d attribute coordinates
    let d = $(this).attr('data-d');
    
    // override data-d attribute value with original d attribute coordinates
    $(this).attr('data-d', $(this).attr('d'));
    
    // set d attribute with temporally stored hover-state coordinates
    $(this).attr('d', d);

  // on any segment mouse leave path
  }).on('mouseleave',function(e) {

    // temporally store original-state data-d attribute coordinates
    let d = $(this).attr('data-d');
    
    // override data-d attribute value with hover-state d attribute coordinates
    $(this).attr('data-d', $(this).attr('d'));
    
    // set d attribute with temporally stored original-state coordinates
    $(this).attr('d', d);

  });

});