Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 7 Monaten •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

42 Kommentare

Profilbild von Samiullah Khan

Samiullah Khanvor 7 Monaten

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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 😉

Profilbild von ._.

._.vor 7 Monaten

pffffff… are youn human? 🧐

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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

Profilbild von ._.

._.vor 7 Monaten

😆😆😆

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

In case you want more CSS fun👇

Profilbild von Marchen

Marchenvor 7 Monaten

pure css doing graph theory. wild

Profilbild von David K 🎹

David K 🎹vor 7 Monaten

This is insanely cool

Profilbild von SolusOps

SolusOpsvor 7 Monaten

is CSS Turing complete now?

Profilbild von Amphlux.ye

Amphlux.yevor 7 Monaten

I submit 1571 as my top score

Profilbild von Kris des Chacals ∞

Kris des Chacals ∞vor 7 Monaten

Next step: solve the travelling salesman problem with CSS 😄

Profilbild von Andy

Andyvor 7 Monaten

You are stacked and overflowing with talent.

Profilbild von Nakumbo

Nakumbovor 7 Monaten

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

Profilbild von IGuano

IGuanovor 7 Monaten

is this just running dijkstras

Profilbild von rifusaki (woke izutsumi)

rifusaki (woke izutsumi)vor 7 Monaten

data analysis idea @ohsweetnothin

Profilbild von SuperKreator

SuperKreatorvor 7 Monaten

@DaegoDaeki espabila

Profilbild von huehue

huehuevor 7 Monaten

Are you real ?

Profilbild von Starálfur

Starálfurvor 7 Monaten

CSS gone wild.

Profilbild von D7460N

D7460Nvor 7 Monaten

This is amazing dude. Great job.

Profilbild von Josh

Joshvor 7 Monaten

@samwhoo Very very cool!

Profilbild von ultimatepissmaxerpissmaximizerpisscollector8000

ultimatepissmaxerpissmaximizerpisscollector8000vor 7 Monaten

Wow that's really cool

Profilbild von honeybbqchicken

honeybbqchickenvor 7 Monaten

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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

Profilbild von Niko Alifero

Niko Aliferovor 7 Monaten

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?

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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.

Profilbild von Niko Alifero

Niko Aliferovor 7 Monaten

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

Profilbild von 64s

64svor 7 Monaten

okay cool - brute force but very neat

Profilbild von duar

duarvor 7 Monaten

God damn u... what a beautyy

Profilbild von apiep

apiepvor 7 Monaten

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

Profilbild von Dev Sharma -e/acc

Dev Sharma -e/accvor 7 Monaten

Perfect 🤩

Profilbild von Broda Noel

Broda Noelvor 7 Monaten

With CS… WHAT?!

Profilbild von I

Ivor 7 Monaten

Pec

Profilbild von Possible Pilot Deviation

Possible Pilot Deviationvor 7 Monaten

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.

Profilbild von ANDRÉ ALFIERI

ANDRÉ ALFIERIvor 7 Monaten

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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.

Profilbild von santi 🔜 hell

santi 🔜 hellvor 7 Monaten

holy shit

Profilbild von kaiser.eth

kaiser.ethvor 7 Monaten

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

Profilbild von Jasiarz

Jasiarzvor 7 Monaten

CSS is not blo...

Profilbild von wsquarepa

wsquarepavor 7 Monaten

damn, no js is wild

Profilbild von Madhusoodan

Madhusoodanvor 7 Monaten

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 7 Monaten

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

Profilbild von IsoWeeb

IsoWeebvor 7 Monaten

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

Ähnliche 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 👀

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Monat

💡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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 5 Monaten