<svg viewBox="0 0 200 90" xmlns="http://www.w3.org/2000/svg" width="200px">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#fff"/>
      <circle cx="30" cy="45" r="10" fill="#000"/>
    </mask>
    <linearGradient id="lg">
      <stop stop-color="darkred" offset="10%" />
      <stop stop-color="red" offset="60%" />
      <stop stop-color="darkred" offset="90%" />
    </linearGradient>
    <style>
      text{
        font-size: 60px;
        font-family: sans-serif;
        fill:#fff;
        font-weight: 900;
      }
    </style>
  </defs>
  <path d="M0,45 45,0 200,0 200,90 45,90z" mask='url(#mask)' fill="url(#lg)"/>
  <text x="25%" y="75%">
    50%
  </text>
</svg>