I made a similar feature as a Tumblr post type during an internal hackathon -- shame that never got to see the light of day as a production feature. Processing post types, that allowed others to reblog and make revisions. Would've been painful to get it ready for a mobile release unfortunately.
By inspecting the animated diagrams they switch from text rendering in a PRE element to a CANVAS renderer when the page width shrinks below a certain size.
after a little digging it looks like a custom font called 'Simple Console', though it's not available anywhere I can find other than through the website (which states it's licensed only for use on their website, not for download or use on other sites)
Annoyingly, the canvas is hard-coded to use only the "Simple Console" font; if your browser doesn't load the font for whatever reason, it shows up in a proportional typeface which ruins the effect.
Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.
20 comments
[ 3.1 ms ] story [ 62.9 ms ] threadBy inspecting the animated diagrams they switch from text rendering in a PRE element to a CANVAS renderer when the page width shrinks below a certain size.
https://lineto.com/typefaces/simple
https://play.ertdfgcvb.xyz/#/1612272092088
https://play.ertdfgcvb.xyz/#/1625307783449
Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.
Note: some CSS attributes for the pre (or canvas) can be set trough an exported “settings” object: