<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}