JSFiddle - React, Tailwind, and code Playground

HTML

<div id="console-log"></div>

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        text='<pre>'+text+'</pre>';
        $("#console-log").append($(consoleLine).html(text));
    }
};

    F=n=>
      (w=>{
        for(r=b=[],s=y=x=d=0;n--;
          d&&--l||((s=s+1&7,d=s&3)?l=d-2?w:s/2-2+w+w:w+=!s))
          s>0&s<4?++x:s>4?x?--x:r=r.map(v=>' '+v):b+='  ',
          q=r[s>2&s<6?++y:y]||b,
          r[y]=(q+b).slice(0,x)+'|/_\\'[d]+q.slice(x+1),
          s<2|s>6?y?--y:r=[,...r]:x+=!d*2,x-=!d
      })(1)||r.join('\n')


;[1, 2, 10, 20, 155, 278].forEach(x=>console.log(F(x)))