So this is apparently a thing (and a rather common one, just Google it and you will find plenty of results). And I actually kinda like it. I don't actually like it enough to put it as my email signature, but it's still sweet. If you are like me, and are trying to render this thing in React
, there are just a couple of tweaks to get it working.
___ ___ ___ ___ ___
/\ \ /\ \ /\ \ /\ \ /\ \
\:\ \ /::\ \ /::\ \ /::\ \ /::\ \
___ /::\__\ /:/\:\ \ /:/\:\ \ /:/\:\ \ /:/\:\ \
/\ /:/\/__/ /:/ \:\ \ /::\~\:\ \ /:/ \:\ \ /::\~\:\ \
\:\/:/ / /:/__/ \:\__\ /:/\:\ \:\__\ /:/__/_\:\__\ /:/\:\ \:\__\
\::/ / \:\ \ /:/ / \/_|::\/:/ / \:\ /\ \/__/ \:\~\:\ \/__/
\/__/ \:\ /:/ / |:|::/ / \:\ \:\__\ \:\ \:\__\
\:\/:/ / |:|\/__/ \:\/:/ / \:\ \/__/
\::/ / |:| | \::/ / \:\__\
\/__/ \|__| \/__/ \/__/
___ ___ ___ ___ ___ ___
/\ \ /\ \ /\__\ ___ /\ \ /\ \ /\ \
/::\ \ /::\ \ /:/ / /\ \ /::\ \ /::\ \ /::\ \
/:/\:\ \ /:/\:\ \ /:/ / \:\ \ /:/\:\ \ /:/\:\ \ /:/\:\ \
/::\~\:\ \ /:/ \:\ \ /:/ / ___ /::\__\ /::\~\:\ \ /::\~\:\ \ /::\~\:\ \
/:/\:\ \:\__\ /:/__/_\:\__\ /:/__/ /\__\ __/:/\/__/ /:/\:\ \:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\
\/__\:\/:/ / \:\ /\ \/__/ \:\ \ /:/ / /\/:/ / \/_|::\/:/ / \/_|::\/:/ / \:\~\:\ \/__/
\::/ / \:\ \:\__\ \:\ /:/ / \::/__/ |:|::/ / |:|::/ / \:\ \:\__\
/:/ / \:\/:/ / \:\/:/ / \:\__\ |:|\/__/ |:|\/__/ \:\ \/__/
/:/ / \::/ / \::/ / \/__/ |:| | |:| | \:\__\
\/__/ \/__/ \/__/ \|__| \|__| \/__/
First, make sure you are using a monospace font, otherwise, it will get messed up real quick. These kind of fonts enforce a unique character width. That way, two texts of the same length have the exact same with, regardless of their content. It's pretty useful for making drawings out of characters, otherwise it would just be chaos.
The second thing, although depending on how you approach this, you may not run into this problem, is to properly render whitespace characters. The key here is substituting them for
. It's a special whitespace character that will effectively be a whitespace, but won't be removed by JS.