JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <div class="svg-flex" style="width:50%">
        <div class="svg-flex-inner">
          <svg viewBox="40 40 320 320" xmlns="http://www.w3.org/2000/svg">
              <g>
                  <path fill="rgb(175, 216, 248)" stroke="rgb(0, 0, 0)" stroke-width="1" d="M200,40 A160,160 0 0 1 313.1370849898476,313.1370849898476 A160,160 0 0 1 40,200.00000000000003 L200,200 Z">
                      <title>Blueberries</title>
                  </path>
                  <text x="256.5685424949238" y="256.5685424949238" fill="rgb(0, 0, 0)" stroke="rgba(255, 255, 255, .5)" stroke-width="0.1" text-anchor="middle" font-size="25">75%</text>
              </g>
              <g>
                  <path fill="rgb(139, 186, 0)" stroke="rgb(0, 0, 0)" stroke-width="1" d="M40,200.00000000000003 A160,160 0 0 1 41.96986550477794,174.97048559356307 A160,160 0 0 1 47.83095739277542,150.55728090000844 L200,200 Z">
                      <title>Pears</title>
                  </path>
                  <text x="73.57589240382237" y="179.97638847485047" fill="rgb(0, 0, 0)" stroke="rgba(255, 255, 255, .5)" stroke-width="0.1" text-anchor="middle" font-size="11">5%</text>
              </g>
              <g>
                  <path fill="rgb(255, 142, 70)" stroke="rgb(0, 0, 0)" stroke-width="1" d="M47.83095739277542,150.55728090000844 A160,160 0 0 1 105.95435963320428,70.55728090000844 A160,160 0 0 1 199.99999999999997,40 L200,200 Z">
                      <title>Oranges</title>
                  </path>
                  <text x="152.97717981660213" y="135.27864045000422" fill="rgb(0, 0, 0)" stroke="rgba(255, 255, 255, .5)" stroke-width="0.1" text-anchor="middle" font-size="14">20%</text>
              </g>
          </svg>
        </div>
    </div>

CSS

.svg-flex-inner {
  position: relative;
  padding-top: 100%;
}

.svg-flex svg {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

JavaScript

/*(function ($) {
      //var ua = window.navigator.userAgent;
      //if(ua.indexOf('MSIE ') === 0 && ua.indexOf('Trident/') === 0) {
      //	return;	// Not IE
      //}

      // Target SVGs with percentage width
      $('svg[width*="%"]').each(function () {
        var svg = $(this);
        var oldWidth = parseFloat(svg.attr('width'), 10);
        svg.width('100%').parent().parent().width(oldWidth + '%').addClass('svg-flex');
      });
  }(jQuery));*/