concave lines connect to some box

How would you build something like this? The lines that look like a concave node. I have no idea, I thought about using canvas but I have doubts on this approach as well
No description
5 Replies
MarkBoots
MarkBoots5mo ago
there are different approaches, but it will take some work maybe first look at https://anseki.github.io/leader-line/ they have a lot of options
LeaderLine
Draw a leader line in your web page.
glutonium
glutonium5mo ago
ok this is DOPE now m wondering how i can make on my own m on mobile, can't check but it this svg? the lines
Pi, a future fluent jp speaker
why is the code for it bigger than 2 thousand lines
MarkBoots
MarkBoots5mo ago
well it is a library, so yea, it's probably more than needed in this scenario. I made a start of drawing the line ourselves in svg, but it's a lot of work Here an example. https://codepen.io/MarkBoots/pen/VwJeyor I only covered when the end point is positioned to the the right and below the start point. The logic will differ depending on the positions. Also i don't have a resize event. Let alone the options for styling the line itself or the snapping-points Still a lot of logic to add to make that work (but I'm not gonna try and reinvent the wheel, that's what libraries are for)
Chris Bolson
Chris Bolson5mo ago
I created a mindmap a few months ago that joins elements using an SVG curved path. The styling is done in Tailwind but this is simple enough to convert to pure CSS. https://codepen.io/cbolson/pen/LYvNEpx As Mark says, obviously nowhere near as complete a library such as leader-line but could probably be adapted to your needs.
Chris Bolson
CodePen
Tailwind - JavaScript - MindMap
Forked from my original submission for the daily challenge on icodethis.com https://icodethis.com/submissions/72690...
Want results from more Discord servers?
Add your server