ASCII art with Jorge Aguirre

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.

More concepts