If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, links, text formatting, etc., but I can see people liking the idea of the hexagonal containers being plain divs that you can put whatever content you want into.

You can put arbitrary HTML elements inside an SVG element embedded in an HTML page:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?

No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.

Shameless plug. https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.

Putting nice markup (or even OK formatted text) into SVG has been a pain for me.

I put an SVG background, then layer the HTML over it.

It works but, I'm not happy about it.

Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.

This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.

SVG is not typically very responsive (mobile, desktop), and you end up digging yourself into a "no support" hole.

It seems the web community is dedicated to forcing things to work until they become fully supported features of HTML.

Also, in this case, CSS grid is a very good choice for layout, but the background could totally just be an svg.

To explain why that is: In SVG everything has x and y coordinates relative to the SVG view box. There is no fundamental declarative layout like in HTML/CSS where the browser will calculate where elements go for you.

SVG is great as something to embed in HTML, but not the other way around.

It's a different context than plain HTML content, so there's that...