SVG diagram, with actual binary logic powering the display state, implemented in vanilla CSS with the Space Toggle trick.
No JavaScript necessary.
Follow me on twitter @James0x57 for more web shenanigans
Shout-out to @RockStarwind for the idea to use checkboxes as an exploratory source for Space Toggle variables. I've been up all night building this as a result! :3
Check out the source code here: https://github.com/propjockey/bcd7sdd and tweet at me if you want to ask questions or chat! @James0x57
This state machine is built in CSS with a trick called "Space Toggle" discovered to kick off the development of augmented-ui v2 in April 2020. (though unknown to me, it was previously discovered by @anatudor about 3 years ago, so credit where due!) You can read more about Space Toggle in these tweets which contain links to JSBins you can explore further with:
Second Tweet, a simple demo
First Tweet, an advanced demo
Or checkout how Space Toggle is used to make responsive, vanilla, CSS much easier in css-media-vars for some more real-world example useage!