Loading video...

Video Failed to Load

Go Home

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

Samiullah Khan's profile picture
Samiullah Khan7 months ago

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

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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 😉

._.'s profile picture
._.7 months ago

pffffff… are youn human? 🧐

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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

._.'s profile picture
._.7 months ago

😆😆😆

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

In case you want more CSS fun👇

Marchen's profile picture
Marchen7 months ago

pure css doing graph theory. wild

David K 🎹's profile picture
David K 🎹7 months ago

This is insanely cool

SolusOps's profile picture
SolusOps7 months ago

is CSS Turing complete now?

Amphlux.ye's profile picture
Amphlux.ye7 months ago

I submit 1571 as my top score

Kris des Chacals ∞'s profile picture
Kris des Chacals ∞7 months ago

Next step: solve the travelling salesman problem with CSS 😄

Andy's profile picture
Andy7 months ago

You are stacked and overflowing with talent.

Nakumbo's profile picture
Nakumbo7 months ago

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

IGuano's profile picture
IGuano7 months ago

is this just running dijkstras

rifusaki (woke izutsumi)'s profile picture
rifusaki (woke izutsumi)7 months ago

data analysis idea @ohsweetnothin

SuperKreator's profile picture
SuperKreator7 months ago

@DaegoDaeki espabila

huehue's profile picture
huehue7 months ago

Are you real ?

Starálfur's profile picture
Starálfur7 months ago

CSS gone wild.

D7460N's profile picture
D7460N7 months ago

This is amazing dude. Great job.

Josh's profile picture
Josh7 months ago

@samwhoo Very very cool!

ultimatepissmaxerpissmaximizerpisscollector8000's profile picture
ultimatepissmaxerpissmaximizerpisscollector80007 months ago

Wow that's really cool

honeybbqchicken's profile picture
honeybbqchicken7 months ago

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

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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

Niko Alifero's profile picture
Niko Alifero7 months ago

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?

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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.

Niko Alifero's profile picture
Niko Alifero7 months ago

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

64s's profile picture
64s7 months ago

okay cool - brute force but very neat

duar's profile picture
duar7 months ago

God damn u... what a beautyy

apiep's profile picture
apiep7 months ago

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

Dev Sharma -e/acc's profile picture
Dev Sharma -e/acc7 months ago

Perfect 🤩

Broda Noel's profile picture
Broda Noel7 months ago

With CS… WHAT?!

I's profile picture
I7 months ago

Pec

Possible Pilot Deviation's profile picture
Possible Pilot Deviation7 months ago

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.

ANDRÉ ALFIERI's profile picture
ANDRÉ ALFIERI7 months ago

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

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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.

santi 🔜 hell's profile picture
santi 🔜 hell7 months ago

holy shit

kaiser.eth's profile picture
kaiser.eth7 months ago

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

Jasiarz's profile picture
Jasiarz7 months ago

CSS is not blo...

wsquarepa's profile picture
wsquarepa7 months ago

damn, no js is wild

Madhusoodan's profile picture
Madhusoodan7 months ago

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

CSS by T. Afif's profile picture
CSS by T. Afif7 months ago

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

IsoWeeb's profile picture
IsoWeeb7 months ago

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

Related Videos

25 algorithms every programmer should know: Let's start with my top favorite 10. If nothing else, you should read about these algorithms and have a good idea of how they work: 1. Linear search to find an element in a list 2. Binary search to find an element on a sorted list 3. Bubble sort to sort a list 4. Merge sort will also sort lists 5. Quicksort to sort the list and do it fast 6. Dijkstra to find the shortest path in a graph 7. Breadth-first Search (BFS) for trees or graphs 8. Depth-first search (DFS) for trees or graphs 9. Huffman for doing data compression 10. Anything related to dynamic programming Learning about algorithms is like getting tattoos: you never have enough. Here are another 5 algorithms that will help you go beyond the basics: 11. Kruskal for the finding minimum spanning tree 12. Floyd Warshall, shortest paths in a graph 13. Union Find to detect cycles in a graph 14. Bellman-Ford, shortest path in a graph 15. Lee for finding the shortest path in a maze If you are serious about this topic, I recommend learning about algorithms' space and time complexity. People usually refer to this topic as "Big O" notation. You should build a good intuition about the performance of different algorithms and learn how to evaluate them. Machine Learning will rule the next 50 years, so the next 10 algorithms you can't ignore are the following: 16. Linear Regression 17. Logistic Regression 18. Decision Trees 19. Bayes' theorem 20. k-Nearest Neighbors (kNN) 21. Every algorithm related to neural networks 22. K-means 23. Random forest 24. Gradient boosting algorithms 25. Any dimensionality reduction algorithm (PCA, for instance) There are many more mind-blowing algorithms! I haven't found a better way to understand how computers work from a first-principles point of view than reading about different algorithms. Take a look at the attached video.

Santiago

274,092 views • 2 years ago