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

amachree tamunoemi

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

enxaneta

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-12

Comments

0 comments

TOP Ranking

Article

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

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

grouping by column variables and appending a new variable based on condition

Python Read Directory And Output to CSV

BigQuery - concatenate ignoring NULL

Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use

Remove adjacent duplicates in linked list in C

Can a 32-bit antivirus program protect you from 64-bit threats

How to keep curl session alive between two php processes?

Limit number of characters in uitextview

Unable to use switch toggle for dark mode in material-ui

In C#, is there a way to create a List directly from an Array without copying?

Laravel getting value from another table using eloquent

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

MTKView Displaying Wide Gamut P3 Colorspace

Vector input in shiny R and then use it

Modify c# Windows Forms control library

SQL Server : are transaction locking table for other users?

When I click any button in my view page the form is submitted

Can you sort columns (horizontally) in Google Sheets?