SVG d6
I’ve posted a few games-in-posts and other toys that involve rolls of dice, and my strategy is to use Unicode die-face symbols. I think, for the foreseeable future, this is how I will continue to handle such matters – it’s clean, compact, and rather portable. For whatever reason, I was wondering how best to achieve this in an SVG containing all of the pips, with the face selected via class and modified via CSS. So, below is an SVG die that contains seven pips, with its class set to .die1. But if we set it to .die2, it hides the (0-indexed, left to right, top to bottom) pips 1, 2, 3, 4, and 5. If we set it to .die4, it hides pips 2, 3, and 4. This works, of course, for .die3, .die5, and .die6 too, of course. Since pips 0 and 6 and pips 1 and 5 will always be (in)visible together, we can combine either set into a single class, .pip06, and .pip15 to simplify the .die classes that hide them.
Pros include the ability to customize dice (regular D6s and fudge dice, say, or simply multicolored pips), the potential to mix in other-sided dice, and likely superior accessibility. Cons are complexity and file-size (SVGs must be embedded into posts as SVG elements). The latter can be mitigated by generation of the SVGs from whatever JS would be running the show, but it’s still a bit clumsy. An interesting experiment, regardless of whether or not I ever use it.