Как менять ширину svg в зависимости от введенного размера

Подскажите пж. каким способом можно сделать так, что бы вот эти волнистые svg линии меняли размер, а именно ширину в зависимости от введённых процентов? И как мне прилепить цифру с процентами к этой самой линии? На первой картинке ниже это то что у меня, а на второй как надо сделать.

<div class="services__inner">
            <div class="services__info">
                <img src="images/vector-85.svg" alt="">
                <div class="services__info-item">
                    Приехали второй раз
                    <span>85%</span>
                </div>
                <img src="images/vector-85.svg" width="247px" alt="">
                <div class="services__info-item">
                    Научились кататься
                    <span>95%</span>
                </div>
                <img src="images/vector-85.svg" width="293px" alt="">
                <div class="services__info-item">
                    Довольных клиентов
                    <span>99%</span>
                </div>
            </div>

.services__inner{
    display: flex;
}

.services__info{
    width: 350px;
    margin-right: 250px;
    flex: none;
    margin-top: 8px;
}

.services__info-item{
    padding: 1px 0 10px;
    position: relative;
}

.services__info-item span{
    display: block;
    position: absolute;
    top: 0px;
    right: 0;
    font-weight: 400;
    font-size: 24px;
}