Inverted corners are hard. Have you ever wanted to do this?

Good Luck! 😅

Until now... Check this out:

😎

npm install borderline

import Borderline from 'borderline'

function App() {
    return (
        <>
            <Borderline>
                <div>One</div>
                <div>Two</div>
                <div>Three</div>
            </Borderline>
        </>
    )
}

The algorithm is pretty simple, it is the same one that those toy robot line-followers use:

1. Find all the elements that are direct children of the Borderline component
2. For each bounding box, create vectors between the corners in a clockwise direction
3. Start at the top left corner and begin following the vectors
4. At each endpoint, try to turn left, continue straight, or turn right, in that order.
5. Continue until you reach the starting point.
6. Calculate the midpoints, anchor points, and control points for the SVG path.
7. Draw the path. Done!

There are some finer details, like how to avoid hopping over nontraversable gaps and such, but that's basically it.

Another approach would be a hull algorithm, but they do not handle concavity well and do not take advantage of the fact that we know the elements are rectangles.

• The elements must be rectangles
• The only elements that are counted ane the direct children of the Borderline component
• The elements must not overlap
• There is some lag, because it needs to wait for the elements to render before calculating the path
• The algorithm is not optimized and could be faster. If I use it enough, I might have to rewrite it.
• It generally kinda seems like overkill to create a traversal vectorspace and fire a whole pathfinding algorithm every frame that changes. Such is the price of beauty, I suppose.

TODO:

• Rewrite to handle scrolling correctly
• Smooth out skipping small ledges
• Break apart the algorithm into smaller functions
• Optimize the algorithm
• Fix corners to use the path corners instead of the element corners
• Add tests
• Add examples
• Support overlapping divs
• Support multiple borders for disconnected groups within the same element
• TailwindCSS plugin component
• Add support for different border styles