<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 300 200">

	<text transform="matrix(1 0 0 1 163.4367 89.1606)">
		<tspan x="0" y="0" style="font-family:'Arial'; font-weight: bold; font-size:16px;">IMPORTANT</tspan>
		<tspan x="16" y="15" style="font-family:'Arial'; font-weight: bold; font-size:16px;">THINGS</tspan>
	</text>

	<path class="segment_red" d="M211.559,30.588c14.101,0,26.998,5.213,36.897,13.798l20.178-20.177 c-15.086-13.727-35.12-22.106-57.075-22.106c-22.475,0-42.922,8.796-58.123,23.105l20.132,20.133 C183.6,36.183,196.938,30.588,211.559,30.588z"/>

	<path class="segment_green" d="M211.559,143.389c-15.711,0-29.936-6.463-40.173-16.863l-20.133,20.133 c15.395,15.558,36.741,25.216,60.306,25.216c22.753,0,43.428-9.016,58.685-23.642L250.112,128.1 C240.018,137.571,226.459,143.389,211.559,143.389z"/>

	<path class="segment_gold" d="M267.959,86.988c0,14.466-5.479,27.673-14.465,37.667l20.143,20.144 c14.135-15.168,22.808-35.491,22.808-57.811c0-23.118-9.301-44.097-24.343-59.421L251.968,47.7 C261.854,57.865,267.959,71.723,267.959,86.988z"/>
	
	<g class="aqua_pieces">
	<path class="segment_aqua" d="M155.158,86.988c0-14.745,5.694-28.18,14.991-38.24l-20.133-20.133 c-14.45,15.227-23.344,35.774-23.344,58.373c0,21.508,8.056,41.16,21.289,56.135l20.179-20.179 C160.037,113.176,155.158,100.642,155.158,86.988z"/>
	
	<g class="aqua_over">
	<polygon points="128.841,96.714 114.283,86.548 128.841,76.387"/>

	<path d="M98.17,64.364l-14.207-0.126c-5.224,0.126-7.164,4.32-7.164,5.76v0.187v0.88l0,19.322 c0,1.327,1.064,2.387,2.317,2.387c1.314,0,2.377-1.06,2.377-2.387l0-16.701h1.97l0,16.021c0,0.253,0.033,0.5,0.063,0.68l0,28.729 c0,1.82,1.436,3.32,3.254,3.32c1.817,0,3.253-1.5,3.253-3.32l0-25.342h1.624l0,25.342c0,1.82,1.443,3.32,3.224,3.32 c1.813,0,3.29-1.5,3.29-3.32l0-29.409V89.58V73.685l1.751,0l0,16.701c0,1.327,1.126,2.387,2.5,2.387 c1.41,0,2.504-1.06,2.504-2.387l0-19.322v-0.88v-0.5C104.925,67.931,102.607,64.364,98.17,64.364z"/>

	<path  d="M90.877,63.238c3.1,0,5.597-2.44,5.597-5.441c0-3.067-2.497-5.567-5.597-5.567 c-3.098,0-5.631,2.5-5.631,5.567C85.246,60.797,87.779,63.238,90.877,63.238z"/>

	<text x="100" y="135" style="font-weight: bold;">Friends</text>
	<text x="100" y="145" >This is an example of text</text>
	<text x="100" y="153" >that can appear on rollover</text>
	</g>

</svg>
      svg {width:500px; height:292px;}
			.segment_red{ fill: #EF3B39; }
			.segment_red:hover { fill: #ba0f11; }
			.segment_green{ fill: #CCDB2A; }
			.segment_green:hover{ fill: #aab720; }
			.segment_gold{ fill: #FFCC67; }
			.segment_gold:hover{ fill: #e4a739; }
			.segment_aqua { fill: #48C2C5; }
			.aqua_pieces:hover .segment_aqua { fill:#3c9497; }
			.aqua_pieces .aqua_over { display:none;}
			.aqua_pieces:hover .aqua_over { display:inherit; }
			.aqua_over * { fill: #3c9497; }
			.aqua_over text { font-family:Arial; font-size:8px; text-anchor: end; }
      [class^="segment"]:hover {transform: scale(1.05); transform-origin: 50% 50%; transform-box: fill-box; transition: .4s transform ease}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.