Check out Temani Afif's mindblowing CodePen: https://codepen.io/t_afif/pen/YPWMmOP

Things are getting out of hand with all the stuff you can do with modern CSS 😅.

In this one, I try to make sense of a crazy CodePen that Temani Afif put together that calculates the shortest distance between several points, all with just some CSS. 

⌚ Timestamps
00:00 - Introduction
01:45 - there is no JavaScript
03:00 - trying to figure out how this works
13:50 - sort of getting it

#css

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join

---

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

A walkthrough of a CSS-only shortest path finder demo (by Tmania on CSSON.dev) that calculates and highlights the shortest route between draggable nodes using advanced CSS features. The demo uses CSS math functions like hypot(), CSS counters for displaying distances, view timelines to track element positions, container style queries with range syntax to compare distances, anchor positioning for connecting nodes, and registered custom properties — all without any JavaScript logic (JS is only used for drag-and-drop). The author explores the code live, explaining how each CSS feature contributes to the pathfinding algorithm.

And they say CSS isn't a programming language

This is rage bait… AND I’M CLEARLY FALLING FOR IT!

CSS masters are virtuosos, but they do it only to impress. CSS is intended solely for web page styles.

At this pace, one day, some ascetic dev will implement a bounded-space Turing machine in pure CSS with which they will compile the code of a browser, which they will in turn use to write the same abomination in CSS. The Universe is such a funny place

Brilliant. Seems that CSS is now at the complexity level of C++ templates, which eventually became Turing-complete.

Reminds me of a critical path in project management, would be cool to adjust the days of slack time with this as the gui.