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
5 Replies
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.
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
why is the code for it bigger than 2 thousand lines
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)
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...