JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div class="svg-wrapper">
	<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"
		 width="570.049px" height="569.001px" viewBox="0 0 570.049 569.001" enable-background="new 0 0 570.049 569.001"
		 xml:space="preserve">
	<!-- <path fill="#1387C9" d="M136.448,339.175c21.922,58.945,78.01,101.222,144.201,102.849l-0.056-52.309
		c-42.697-1.589-78.898-28.488-94.061-66.148L136.448,339.175z"/>
	<path fill="#1387C9" d="M289.859,389.682l0.051,52.306c65.648-2.181,121.152-44.364,142.878-102.982l-50.086-15.612
		C367.734,360.761,332.065,387.605,289.859,389.682"/>
	<path fill="#1387C9" d="M351.213,202.101c23.825,19.381,39.057,48.919,39.057,82.024c0,10.612-1.582,20.852-4.491,30.513
		l49.966,15.581c4.447-14.591,6.857-30.068,6.857-46.116c0-50.519-23.731-95.459-60.625-124.391L351.213,202.101z"/>
	<path fill="#1387C9" d="M194.89,154.023l30.75,42.372c16.839-11.338,37.118-17.957,58.944-17.957
		c21.933,0,42.305,6.683,59.193,18.125l30.746-42.361c-25.532-17.71-56.512-28.118-89.939-28.118
		C251.263,126.084,220.371,136.421,194.89,154.023"/>
	<path display="none" fill="#1E3565" d="M238.247,133.286c-15.401,4.723-29.549,11.601-42.234,20.172l29.534,43.207
		c8.432-5.663,17.814-10.21,28.021-13.342c31.752-9.733,64.566-3.754,90.117,13.474l31.507-41.838
		C336.686,128.036,286.649,118.448,238.247,133.286"/>
	<path display="none" fill="#1E3565" d="M235.815,434.849c15.35,4.887,30.897,7.29,46.205,7.465l0.325-52.335
		c-10.156-0.146-20.458-1.749-30.631-4.987c-31.645-10.079-55.214-33.68-66.409-62.39l-49.724,16.451
		C151.903,383.109,187.577,419.483,235.815,434.849"/>
	<path display="none" fill="#1E3565" d="M416.007,194.271c-9.067-13.314-19.822-24.795-31.763-34.376l-32.536,40.994
		c7.904,6.378,15.023,13.995,21.034,22.819c18.691,27.451,22.687,60.565,13.789,90.068l49.286,17.721
		C450.144,286.752,444.5,236.118,416.007,194.271"/> -->
	<a target="_blank" href="http://headsinternational.com/focus/technology">
		<g...

CSS

.svg-wrapper {

	    background: #ccc;
	    display: inline-block;
	    margin: 0 auto;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    transform: translate(-50%, -50%);
	}
	.svg-wrapper text,
	.svg-wrapper tspan{
		font-family: 'Open Sans';
		font-weight: 700;

	}
	.small-chunk,
	.pie-chunk{
		transition: 0.8s;
	}
	
	
	g#Technology:hover text tspan,
	g#Technology:hover text{
		fill: #fff;
	} 
	g#Technology:hover .pie-chunk:hover{
		fill: #5D5D5D;
		opacity: 0.9;
	}
	g#Technology:hover .small-chunk{
		fill: #1E3565;
	}