Search code examples
javascriptrenderingdrawinginterpolationcurve-fitting

How to automatically generate and draw a smooth curve between two surfaces in JS?

I would like to be able to automatically generate smooth curves between two (flat) surfaces of DOM elements in JS, similar to the Curved Connector in Google Slides:

enter image description here

In GS, you can add a Curved Connector and then plug each end into any other anchor point. If the target anchor point belongs to a surface, the connector line will be perpendicular to it. Intermediate points are automatically generated and interpolated to make for a smooth curve. Here are four examples:

enter image description here

→ Not sure if there is a library out there? Thus far, I have sadly not found anything

Solution

  • d3-graphviz does all the magic:

    • The edges are rendered straight by default, but are automatically bent to avoid other nodes.
    • It also has an auto layouting algorithm for layered/hierarchical graphs.
    • It uses graphviz (with the help of wasm) under the hood.

    Here is an example:

    enter image description here