JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="leftbar">
<a href="#"  data-3200="left:12%;top:0%;" data-3500="left:12%;top:16%;" data-toggle="#div1" class=" link">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
<path d="M917.144,43.329C602.676,32.862,345.103,148.86,345.103,148.86c-0.062,196.202-0.124,392.424-0.186,588.626
	c-32.021-12.706-70.958-15.736-110.506-6.111c-85.259,20.72-141.089,92.179-124.699,159.64
	c16.391,67.462,98.783,105.37,184.034,84.669c80.393-19.535,134.592-84.186,126.788-148.045c0-146.609,0-293.22,0-439.829
	c0,0,182.142-63.681,418.401-79.65c0,109.044,0,218.087,0,327.132c-31.678-12.135-69.862-14.877-108.693-5.45
	c-85.261,20.719-141.09,92.161-124.699,159.66c16.372,67.444,98.773,105.333,184.024,84.632
	c74.452-18.104,126.455-74.883,127.548-133.887c0.01,0,0.02,0.037,0.028,0.037C917.144,507.966,917.144,275.647,917.144,43.329z" onmouseover="evt.target.setAttribute('fill', 'black');" onmouseout="evt.target.setAttribute('fill', 'white');"/>
</svg>
</a>

<a href="#"  data-3200="left:12%;top:5%;" data-3500="left:22%;top:18%;" data-toggle="#div2" class=" link">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
<g class="islands">
	<path fill="#010101" d="M197.707,824.147c4.909,4.895,9.803,9.787,14.701,14.701c-8.947,7.229-12.812,17.197-11.589,29.883
		c-7.949-7.953-15.899-15.908-23.857-23.853"/>
	<path fill="#010101" d="M197.707,824.147c-4.907-4.923-9.807-9.807-14.705-14.719c-7.234,8.95-17.197,12.817-29.878,11.598
		c7.948,7.944,15.897,15.908,23.848,23.853"/>
	<path fill="#010101"...

CSS

body { background:#eee; margin:2em }
   
    .islands  { stroke-width:2px; stroke:#700; fill:#620; fill-opacity:0.5 }
    .over     { stroke-width:4px; stroke:#930; fill:#ff0; fill-opacity:0.9 }

JavaScript

var svg  = document.getElementsByTagName('svg')[0];
    var svgNS = svg.getAttribute('xmlns');
    svg.addEventListener('mouseover',function(e){
      var g = e.target.parentNode;
      g.setAttribute('class',g.getAttribute('class')+' over');
    },false);
    svg.addEventListener('mouseout',function(e){
      var g = e.target.parentNode;
      g.setAttribute('class',g.getAttribute('class').replace(' over',''));
    },false);