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

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