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

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


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.

<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>


Solution using a vector editor

Open the file * .svg in a vector editor

<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> 

This is how it looks in the editor:

enter image description here

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.

enter image description here

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:

<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>