JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="auto">
  <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="crisp">
  <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

CSS

svg {  
  backface-visibility: hidden;
  width:50%;
}
.auto {
   fill: #37d0cd;
   shape-rendering: auto;
}
.crisp {
  fill:#37d0cd;
  shape-rendering: crispedges;
}
.crisp path {
  stroke:red;
  shape-rendering: auto;
}