How to close path of two parallel quadratic Bezier curves where each starts with a MoveTo tag

I am implementing Sankey Diagram from scratch with using VueJS and SVG, I am now faced with difficulties to close paths of two parallel quadratic Bezier curve paths from nodes to nodes.

Where for example through additional calculations I obtained the following paths

path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

The paths are combined this way, thinking it will work but it fails

<g>
 <template v-for="(point,index) in sankeyNode">
  <template v-for="(pnode, idex) in Object.entries(point)">
   <template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
    <g style="stroke-width:1;"  stroke="black" fill="pink" :stroke-opacity="0.3">
     <path :d="paths[0]+' '+paths[1]+' Z'" />
    </g>
   </template>
  </template>
 </template>
</g>

These two paths are parallel to each other but I would love to make them a close path so that I can fill the combined paths and would look like the image below

Currently when the paths are combined it looks this way

I have tried the following with using the image below for illustration

Now when I get to "Point A" which is end of Path2, I tried to add a Vertical lineto to "Point B" so that from "Point B" I can form a Quadratic Bezier curve to "Point E" and close the path of CABE and also do the same for Path1 by adding a Vertical lineto from "Point C to E" then from point E formed a Quadratic Bezier curve to Point F and close the path of GCEF.

My attempt didn't work and I am rereading the SVG docs to find a clue on how to solve this..

Please I need someone to give me a clue on how to solve this problem. Thanks

Since both paths begin to the left I had to reverse the second path so that it begins from the right. Next I joined the 2 d attributes for the paths and replaced the M command of the second path with L (line). Also I've closed the path by adding the z command at the end. I hope this is what you need.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<svg viewBox="0 0 400 200">

<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994
           L360.07142857142856,171.66646326824585Q197.53571428571428,107.65044814340591 35,107.65044814340591
           z"/>

</svg>

<!-- end snippet -->

Solution using a vector editor

Open the file * .svg in a vector editor

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" viewBox="0 0 400 200">
<g fill="none" stroke="black">
<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"/>
<path d = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"/>
</g>
</svg> 

<!-- end snippet -->

This is how it looks in the editor:

Connect the two extreme points of two Bezier curves.

It is allowed not to connect the second pair of points from the other end of the curves in the vector editor.
This will be done with the z parameter, which the editor will add.

From the file saved in the vector editor, only path will be needed.
Copy this path to another * .svg file

Below is the code of the received file:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" viewBox="0 0 400 200">
<g fill="#d3d3d3" stroke="black" >

<path d = "M 360.07143,171.66646 C 251.71429,128.98912 143.35714,107.65045 35,107.65045 V 20.396927 c 108.35714,0 216.71429,21.338672 325.07143,64.016015z"/>
</g>
</svg> 

<!-- end snippet -->