Some commenters on HN and Twitter were curious how I made the spinning diagrams in a previous thing I wrote, so 8 months later I finally wrote down an explanation.
Faces of the cube with the same color as the background and opacity 0.2 would almost certainly work. My next thought is duplicate the original cube, remove the characters from the duplicate cube and set the color on the duplicate only, then move the duplicate cube back one pixel in the z direction.
This is awesome in (for me) at least two dimensions at the same time: it's a very interesting way of visualizing the actual math concept going on, by making the equation 3D to match what it's modelling. At the same time, it's very impressive technically that this can be done at all, and done without active per-frame custom code.
That this amount of "whoa that's not a 2D document" can be done by the web's standard stylizing technology is amazing. I'm not (again, personally) 100% convinced it should be this amazing[*], but that's another discussion.
Well done.
[*]: I'm just afraid of the complexity level in modern browsers, that's the other side of the "wow it can do that?" coin.
You can do so much with pure css. Using checkboxes elements to toggle menus comes to mind as one of the lowest hanging fruits. Also detail elements are great.
Really? Can you explain this a little more? If memory serves I use close/open check boxes that have labels with descriptive aria and IDs. Then toggling one hides itself and reveals the other.
Typically you’d want to toggle aria-expanded to give more hints to users as to what’s actually happening. You also can’t trap focus into the menu purely with CSS, at a minimum you’ll need to use some JS to set an inert attribute. More info / examples here: https://adrianroselli.com/2023/03/css-only-widgets-are-inacc...
3D CSS is actually super powerful, and once you wrap your head around how transforms interact with each other you can use it like any other 3D library.
I'm not sure I'd ever use it again for something that large as it's a hell of a lot of work but so satisfying once you see the monstrosity you've created running!
He would never have finished Vitruvian Man, he would have wasted too much time trying to get it looking perfect across all browsers / devices / zoom levels.
CSS is largely ignored by readers with few exceptions (`transform` is ignored, `display: none` excludes the text).
You can definitely make this accessible but that alone is a whole exercise. The best bet would be to use MathML-in-HTML and hope that the reader supports it.
i made some n dimensional chart one time. it starts with the usual 2D x,y,z axes then rotates as if a cube to the next chart keeping the dots in the same 3D spot ending in 2D and on to the next chart :)
On one hand people are in awe at this, on the other they complain how bloated browsers are and how much functionality is crammed in them and how they wish for a simple "document only web".
It's actually not terribly difficult, even without JavaScript if you use the new scroll-linked CSS animations and a fake/hidden scrollable area (but without JS, the rotation would be limited to the scroll area itself)
(Previous HN thread here - https://news.ycombinator.com/item?id=32528769 )