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
- A Generator for Fancy Frames Create a lot of cool frames with one generator (Squiggly, Ragged, Wiggly, Wavy, Torn, etc.).
- The Hidden Trick of Style Queries and if() Learn the secret behind the new conditions and how to use them correctly.
- 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.