Graph Theory using Modern CSS
Let's suppose you have a graph with a known number of nodes and you want to identify the shortest path between two nodes. It's possible using only CSS!
Not only can we draw the graph (using my previous implementation of connecting two circles), but we can also do various calculations to find the shortest path (using the technique of getting the width/height of any element)
Drag the different nodes in the demo below to see the magic in play!
⚠️ Chrome-only for now ⚠️
See the Pen Graph Theory (Chrome-only) by Temani Afif (@t_afif) on CodePen.
Except for the drag feature, which relies on JS, everything else is controlled using CSS.
More CSS Tips
- How to use the "auto" value with clamp() A CSS trick to use clamp() with sizing values like auto, min-content, max-content, etc.
- Elastic/Bouncy Text Effect A few lines of modern CSS to create a fancy elastic effect on hover.