Loading video...
Video Failed to Load
In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩
1,202,160 views • 7 months ago •via X (Twitter)
42 Comments

Should I stop my search for good force graph JavaScript library and use this instead

Not really. It's kind of a static implementation tailored to that particular graph. I am still missing features to be able to create a generic algorithm but it will happen in the future 😉

pffffff… are youn human? 🧐

Now that many are hating AI more and more, I'd rather be a human 😅

😆😆😆

In case you want more CSS fun👇

pure css doing graph theory. wild

This is insanely cool

is CSS Turing complete now?

I submit 1571 as my top score

Next step: solve the travelling salesman problem with CSS 😄

You are stacked and overflowing with talent.

I’m sorry for breathing the same air with you or ever opening a computer 😭

is this just running dijkstras

data analysis idea @ohsweetnothin

@DaegoDaeki espabila

Are you real ?

CSS gone wild.

This is amazing dude. Great job.

@samwhoo Very very cool!

Wow that's really cool

Is this analogous to betweenness centrality? I've been trying to understand the concept behind it.

betweenness centrality uses the "shortest path" in its concept, it's not really analogy here.

Why it won't showing the closest path when only one node in between? Did you made it to need to visit 2 nodes in between?

There is no "one node in between" in that graph. Between S and E you have at least two nodes so any path needs to include at least two nodes and since we want the shortest path you won't find more than 2.

With "one node in between" i mean when the shortest path only need one node. Anyway, your second sentence answer my question. Thanks

okay cool - brute force but very neat

God damn u... what a beautyy

wait, with what...? css??? 😮

Perfect 🤩

With CS… WHAT?!

Pec

It's cool but in reality that would be mandated with bunch of airspace restrictions and other caveats that flight managers need to battle every day. But a really nice concept! It has a great potential for a good flight dispatch management program/app.

There are some errors, some lines are missing with other possibilities, such as S > A > B > E (this path is never possible), but in any case it's an incredible piece of work

It's a graph; I define the lines and the nodes and I didn't define any line between B and E. There is no mistakes. All the lines I defined are the one you see.

holy shit

genius. i've always supported the idea that css is an exoteric branch.

CSS is not blo...

damn, no js is wild

This is cool! Can it with some config go for an infinite adjustment?

In a near future maybe. I actually just built one example as a proof of concept.

Jesus Christ, CSS is not supposed to be a programming language. wtf are we doing.

