Как я могу сделать 2 разделения цвета фона с SVG

Question

Я пытаюсь создать карточку для своего сайта. Я пытаюсь использовать SVG с путем, чтобы сделать изогнутую линию, но я не знаю, как я могу сделать два фоновых деления, где одно будет сверху SVG, с цветом X, а другое ниже SVG с ау цвет

HTML

.card__svg {
  position:relative;
  top:-100px;

  z-index:-10;
}

            <div style="display:inline-block;box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);height:450px;width:300px;margin-left:15px;margin-top:50px;color:white;font-family:Fredoka One" id="hvr-float" class="box">
                 <div id="card_top" style="background-position: center;background-repeat: no-repeat;background-size: cover;">
                  <div class="ribbon ribbon-top-right"><span><a href="/premium"><i class="fas fa-crown"></i> Premium</a></span></div>
                  <img style="border: 2px solid grey;border-radius:50%;width:150px;height:150px;position:relative;left:60px;top:60px;" src="" class="card-img-top">
                    <svg class="card__svg" viewBox="0 0 800 500">
                    <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="black" stroke-width="3" fill="transparent"/>
                    </svg>
               </div>
               <div id="card-body"  class="card-body">
                  <a style="color:#d4c078" href="/bots/" class="card-title"></a>
                  <p class="card-text">test</p>
                  <div  class="card-footer">
                  </div>
               </div>
            </div>

Я хочу сделать что-то вроде , что

Answer 1

Как то так?

#hvr-float {
  display:inline-block;
  box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  height:450px;
  width:300px;
  margin-left:15px;
  margin-top:50px;
  color:white;
  font-family:Fredoka One;
  position: relative;
}

.card_top {
  position: relative;
}

.card__svg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 300px;
  z-index:-10;
}

.card-body {
  color: black;
}

<div id="hvr-float" class="box">

  <div id="card_top" style="background-position: center;background-repeat: no-repeat;background-size: cover;">
  
    <div class="ribbon ribbon-top-right"><span><a href="/premium"><i class="fas fa-crown"></i> Premium</a></span></div>

    <img style="border: 2px solid grey;border-radius:50%;width:150px;height:150px;position:relative;left:60px;top:60px;" src="" class="card-img-top">
    <svg class="card__svg" viewBox="0 0 800 500">
      <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400
                                  V 0 H 0 Z" stroke="black" stroke-width="3" fill="red"/>
    </svg>
  </div>

  <div id="card-body"  class="card-body">
    <a style="color:#d4c078" href="/bots/" class="card-title"></a>
    <p class="card-text">test</p>
    <div  class="card-footer">
    </div>
  </div>

</div>