JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<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" d="M338.194,797.405c-37.284-37.273-74.552-74.536-111.847-111.841c-1.182-1.188-2.113-0.806-3.187,0.262
		c-24.999,25.011-50.005,50.001-75.005,75.002c-0.6,0.612-0.926,1.146-0.945,1.73c-0.107,0.534,0.08,1.088,0.689,1.691
		c37.279,37.275,74.553,74.568,111.837,111.853c1.193,1.188,2.119,0.805,3.192-0.262c25.004-24.99,50.005-50.002,75.01-75.012
		c0.595-0.584,0.937-1.148,0.947-1.732C338.984,798.573,338.813,798.03,338.194,797.405z M269.9,860.476L163.54,754.112l60.15-60.15
		l106.358,106.354L269.9,860.476z"/>
	<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" 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="M69.046,510.477c0,6.943,0,13.869,0,20.797c-11.448-1.209-21.23,3.102-29.325,12.949
		c0-11.258,0-22.494,0-33.746"/>
	<path fill="#010101" d="M69.046,510.477c0-6.926,0-13.87,0-20.796c-11.448,1.208-21.23-3.102-29.325-12.928
		c0,11.236,0,22.489,0,33.724"/>
	<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);