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🤩

ChallengesCss's profile picture

CSS by T. Afif

14,096 subscribers

1,200,935 views • 4 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 👀
0:33

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 views • 23 days ago

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!
0:56

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

22,861 views • 10 months ago

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.
2:53

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

273,905 views • 2 years ago

Controlling a 3D graph with hand + voice commands ❋ Using speech recognition to toggle between drag / rotate / zoom interactions, and hand gestures to move the nodes of the graph Created with Three.js, Rosebud AI, mediapipe computer vision, web speech API, and Vasco Asturiano's 3D-force-graph library Please comment if you'd like a tutorial for this 🔗 demo link below
0:39

Controlling a 3D graph with hand + voice commands ❋ Using speech recognition to toggle between drag / rotate / zoom interactions, and hand gestures to move the nodes of the graph Created with Three.js, Rosebud AI, mediapipe computer vision, web speech API, and Vasco Asturiano's 3D-force-graph library Please comment if you'd like a tutorial for this 🔗 demo link below

AA

31,936 views • 1 year ago

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.
1:50

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,762 views • 2 years ago

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
1:56

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,375 views • 4 months ago

💡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.
0:22

💡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,687 views • 6 months ago

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

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

RC12

27,015 views • 1 month ago

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!
0:30

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

Adam Argyle

31,206 views • 1 year ago

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.
0:34

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 views • 2 months ago

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
0:44

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,420 views • 2 years ago

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
1:17

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,691 views • 2 years ago

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.
1:48

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,854 views • 3 years ago

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

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

jhey ʕ•ᴥ•ʔ

59,139 views • 7 months ago

Will Kingston The shortest distance between Russia and the USA
0:59

Will Kingston The shortest distance between Russia and the USA

The Random Guy

170,035 views • 10 months ago

"We're not a consumer company, we're the shortest path to artificial labor." - Bernt Bornich, founder of 1X "It just happens to be that the shortest path is through consumer, because you need to live and learn among people." "Model intelligence comes from the diversity of your AI dataset. There isn't enough variance (if you are just) in a factory." "We want to deploy robots there (in homes), where we get data through a truly intelligent machine that doesn't just repeat a motion."
2:34

"We're not a consumer company, we're the shortest path to artificial labor." - Bernt Bornich, founder of 1X "It just happens to be that the shortest path is through consumer, because you need to live and learn among people." "Model intelligence comes from the diversity of your AI dataset. There isn't enough variance (if you are just) in a factory." "We want to deploy robots there (in homes), where we get data through a truly intelligent machine that doesn't just repeat a motion."

TBPN

15,742 views • 1 year ago

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
0:24

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,271 views • 1 month ago

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
0:29

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 🔶

118,924 views • 3 years ago

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:
1:07

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,216 views • 2 months ago