正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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🤩

CSS by T. Afif

14,037 subscribers

1,202,160 次观看 • 7 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

42 条评论

Samiullah Khan 的头像

Samiullah Khan7 个月前

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

CSS by T. Afif 的头像

CSS by T. Afif7 个月前

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 😉

._. 的头像

._.7 个月前

pffffff… are youn human? 🧐

CSS by T. Afif 的头像

CSS by T. Afif7 个月前

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

._. 的头像

._.7 个月前

😆😆😆

CSS by T. Afif 的头像

CSS by T. Afif7 个月前

In case you want more CSS fun👇

Marchen 的头像

Marchen7 个月前

pure css doing graph theory. wild

David K 🎹 的头像

David K 🎹7 个月前

This is insanely cool

SolusOps 的头像

SolusOps7 个月前

is CSS Turing complete now?

Amphlux.ye 的头像

Amphlux.ye7 个月前

I submit 1571 as my top score

Kris des Chacals ∞ 的头像

Kris des Chacals ∞7 个月前

Next step: solve the travelling salesman problem with CSS 😄

Andy 的头像

Andy7 个月前

You are stacked and overflowing with talent.

Nakumbo 的头像

Nakumbo7 个月前

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

IGuano 的头像

IGuano7 个月前

is this just running dijkstras

rifusaki (woke izutsumi) 的头像

rifusaki (woke izutsumi)7 个月前

data analysis idea @ohsweetnothin

SuperKreator 的头像

SuperKreator7 个月前

@DaegoDaeki espabila

huehue 的头像

huehue7 个月前

Are you real ?

Starálfur7 个月前

CSS gone wild.

D7460N 的头像

D7460N7 个月前

This is amazing dude. Great job.

Josh 的头像

Josh7 个月前

@samwhoo Very very cool!

ultimatepissmaxerpissmaximizerpisscollector8000 的头像

ultimatepissmaxerpissmaximizerpisscollector80007 个月前

Wow that's really cool

honeybbqchicken 的头像

honeybbqchicken7 个月前

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

CSS by T. Afif 的头像

CSS by T. Afif7 个月前

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

Niko Alifero 的头像

Niko Alifero7 个月前

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 的头像

CSS by T. Afif7 个月前

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 的头像

Niko Alifero7 个月前

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

64s 的头像

64s7 个月前

okay cool - brute force but very neat

duar 的头像

duar7 个月前

God damn u... what a beautyy

apiep 的头像

apiep7 个月前

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

Dev Sharma -e/acc 的头像

Dev Sharma -e/acc7 个月前

Perfect 🤩

Broda Noel 的头像

Broda Noel7 个月前

With CS… WHAT?!

I 的头像

I7 个月前

Pec

Possible Pilot Deviation 的头像

Possible Pilot Deviation7 个月前

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 的头像

ANDRÉ ALFIERI7 个月前

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 的头像

CSS by T. Afif7 个月前

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 的头像

santi 🔜 hell7 个月前

holy shit

kaiser.eth 的头像

kaiser.eth7 个月前

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

Jasiarz 的头像

Jasiarz7 个月前

CSS is not blo...

wsquarepa 的头像

wsquarepa7 个月前

damn, no js is wild

Madhusoodan 的头像

Madhusoodan7 个月前

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

CSS by T. Afif 的头像

CSS by T. Afif7 个月前

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

IsoWeeb 的头像

IsoWeeb7 个月前

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

相关视频

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀

CSS by T. Afif

11,611 次观看 • 3 个月前

Here is a showcase of two plugins that will be available in our next client update. Tile Packs & Shortest path! Shortest path features a breadcrumb trail that we are sure is familiar to some of you!

Here is a showcase of two plugins that will be available in our next client update. Tile Packs & Shortest path! Shortest path features a breadcrumb trail that we are sure is familiar to some of you!

HDOS

23,103 次观看 • 1 年前

i made the coolest graph based slides for a presentation i did last saturday at graphcon demo: gh: > nodes have one or more slide numbers > on slide selection, pull in nodes with the slide number > also push out nodes w/o the slide number > "frame" centers around center of nodes w slide number > can define layout (node direction/relationship) per slide > in-slides animation is just letting new nodes in frame > can reuse nodes across slides > entire thing is a single html graph visualization

i made the coolest graph based slides for a presentation i did last saturday at graphcon demo: gh: > nodes have one or more slide numbers > on slide selection, pull in nodes with the slide number > also push out nodes w/o the slide number > "frame" centers around center of nodes w slide number > can define layout (node direction/relationship) per slide > in-slides animation is just letting new nodes in frame > can reuse nodes across slides > entire thing is a single html graph visualization

Yohei

678,109 次观看 • 1 个月前

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.

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 次观看 • 2 年前

More updates to the Shader Graph Editor! Now, with markdown nodes. Write an article, book, blog, and notes, all with embedded shaders. Here's an article by patricio gonzalez vivo on Algorithmic drawing from The Book of Shaders in a fully interactive playground.

More updates to the Shader Graph Editor! Now, with markdown nodes. Write an article, book, blog, and notes, all with embedded shaders. Here's an article by patricio gonzalez vivo on Algorithmic drawing from The Book of Shaders in a fully interactive playground.

Palash Bansal

36,805 次观看 • 2 年前

Andrew Ng built agentic knowledge graph that runs agents loops from scratch: his agents searched thousands of tools through the graph, found the "right" one by meaning, and called it agent efficiency increased by 90% here's how: step 1 → embed every tool, search by meaning - not just keywords step 2 → but "similar" ≠ "correct" - it grabs the wrong one, skips the step before it step 3 → map tools as a graph - nodes are tools, edges are what runs before what step 4 → retrieve the path, not one tool - every tool the task needs, in order step 5 → bake the process into the graph - the sequence becomes data, not a guess most agents fail here and no one knows why - 1-hour brilliant course about it watch & bookmark - then read full course about graph engineering ↓

Andrew Ng built agentic knowledge graph that runs agents loops from scratch: his agents searched thousands of tools through the graph, found the "right" one by meaning, and called it agent efficiency increased by 90% here's how: step 1 → embed every tool, search by meaning - not just keywords step 2 → but "similar" ≠ "correct" - it grabs the wrong one, skips the step before it step 3 → map tools as a graph - nodes are tools, edges are what runs before what step 4 → retrieve the path, not one tool - every tool the task needs, in order step 5 → bake the process into the graph - the sequence becomes data, not a guess most agents fail here and no one knows why - 1-hour brilliant course about it watch & bookmark - then read full course about graph engineering ↓

codila

17,040 次观看 • 1 个月前

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

CSS by T. Afif

25,843 次观看 • 8 个月前

Trying out things with metahumans in blender, made a system with geometry nodes and shaders nodes that stylizes the model

Trying out things with metahumans in blender, made a system with geometry nodes and shaders nodes that stylizes the model

RC12

27,561 次观看 • 3 个月前

Try this Git developer challenge: a bug appeared somewhere in the last 500 commits, and you have a test that detects it. What’s the shortest path to find the exact commit where it was introduced? Share your answer in the comments.

Try this Git developer challenge: a bug appeared somewhere in the last 500 commits, and you have a test that detects it. What’s the shortest path to find the exact commit where it was introduced? Share your answer in the comments.

Google for Developers

16,480 次观看 • 4 个月前

TIL that you can adjust a light's falloff color by using the Ray Length output from the Light Path Node, clamping it down, and plugging it into some color-based nodes! Super handy for stylized lighting! 🤩 #b3d #blender3d #blender #lighting #nodes

TIL that you can adjust a light's falloff color by using the Ray Length output from the Light Path Node, clamping it down, and plugging it into some color-based nodes! Super handy for stylized lighting! 🤩 #b3d #blender3d #blender #lighting #nodes

SMOUSE 🔸 🏳️‍🌈🏳️‍⚧️

334,592 次观看 • 2 年前

This is one of the coolest thing I made in UE5. A level made of functions and nodes, explaining in real time what you do as you play.

This is one of the coolest thing I made in UE5. A level made of functions and nodes, explaining in real time what you do as you play.

Fouad | فؤاد

217,946 次观看 • 3 年前

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 次观看 • 10 个月前

The upcoming PolySpatial / Unity #visionOS release also includes a number of visionOS 2 features! - Metal-based Passthrough - Dynamic light and shadows - Resizable volumes - Shader graph nodes including custom hover effects - Blendshapes - Billboard component - 90Hz hands

The upcoming PolySpatial / Unity #visionOS release also includes a number of visionOS 2 features! - Metal-based Passthrough - Dynamic light and shadows - Resizable volumes - Shader graph nodes including custom hover effects - Blendshapes - Billboard component - 90Hz hands

Dan Miller

18,696 次观看 • 2 年前

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)

the team cooked an insane demo on SMFS dot ai just put in the files (made with css and claude!)

Dhravya Shah

108,154 次观看 • 4 个月前

Working on a Blender demo file for Blender foundation. that showcases the new hair nodes i Blender 3.5. It was great developing the nodes with Simon Thommes who made the final design. #b3d #devfund

Working on a Blender demo file for Blender foundation. that showcases the new hair nodes i Blender 3.5. It was great developing the nodes with Simon Thommes who made the final design. #b3d #devfund

Daniel Bystedt 🔶

119,012 次观看 • 3 年前

made a big breakthrough on tinynodes! this is a huge .blend file with 679 nodes, running 100% in the browser... and it's fully dynamic! at the end of the video, you can see the raw geometry and the node graph that describes how to turn it into this complex wooden structure

made a big breakthrough on tinynodes! this is a huge .blend file with 679 nodes, running 100% in the browser... and it's fully dynamic! at the end of the video, you can see the raw geometry and the node graph that describes how to turn it into this complex wooden structure

Seth Thompson

36,436 次观看 • 4 个月前

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,170 次观看 • 3 年前

Level up your Shader skills 🖥️🎨 Master the fundamentals of Shader Graph by building 8+ real-time visual effects. Learn to navigate the interface, work with nodes, and create a final portfolio piece to showcase your skills. Ready to build? Check out the course:

Level up your Shader skills 🖥️🎨 Master the fundamentals of Shader Graph by building 8+ real-time visual effects. Learn to navigate the interface, work with nodes, and create a final portfolio piece to showcase your skills. Ready to build? Check out the course:

Unity for Games

15,236 次观看 • 5 个月前