lagudal

<style>
 -ms-grid-rows: auto auto;
.table-kpi__number-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:1;
  }
.table-kpi__number-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:1;
  }
.table-kpi__property {
  color: #262626;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
}
.table-kpi__property-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:2;
}
.table-kpi__property-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:2;
}
.table-kpi__edit-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:3;
}
.table-kpi__edit-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:3;
}
</style>

	<div class="table-kpi">
    <div class="table-kpi__number table-kpi__number-row-1">320 052</div>
    <div class="table-kpi__property table-kpi__property-row-1">Количество обработанных заявок</div>
    <div class="table-kpi__edit table-kpi__edit-row-1">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

    <div class="table-kpi__number table-kpi__number-row-2">92</div>
    <div class="table-kpi__property table-kpi__property-row-2">Процент успешно закрытых заявок, %</div>
    <div class="table-kpi__edit table-kpi__edit-row-2">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

	</div>

Для анимации требуется чтобы изображение было одним path

Пробовал в фотошопе обрезать и через заливку но остается порванные части

<svg
xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<path fill="#CA0303" d="M0,0v57.158c0,0,496.366-70.005,964,44c443,108,956-44,956-44V0H0z"/>
</svg>