Post

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

Can I do square elbows if I modify the shape(). And keep it always on the sides?

Yes, you can do almost whatever you want. I will be sharing more idea of connectors soon and also write a detailed article about the technique and how you can adjust the code to get any shape you want.

if() in CSS is really interesting. That's the kind of thing that can be theoretically tricky because it can accidentally make CSS Turing complete, so it introduces parsing complexity. I dug into it and appaerntly there's been a lot of back and forth about implementing it carefully to avoid this.

I have an Electron app that's doing the nodes-and-paths things with a lib and SVG and this could be a big win if moving it off to the core renderer leads to real optimization, so I'm gonna play with it myself, see what happens with hundreds of boxes and thousands of lines. Cool demo, nice work!

A bit wonky but but only two prompts (first it put the bend right in the middle then I refined on what I wanted to see and it explained where that goes). With multiple passes fiddling I bet it can get better-behaved elbows.