JSFiddle - React, Tailwind, and code Playground

by Arnauld Chevallier

HTML

<pre id="output0"></pre><pre id="output1"></pre><pre id="output2"></pre>

CSS

pre {float:left;font-size:10px}

JavaScript

let f =
s=>{v=Array(w=32);p=526;b=n=>v[n>>5]&(1<<(n&31));B=(n,i)=>b(p+n)|b(p-n)?i:0;[...0+s].map(c=>v[(p+=[0,1,-1,w,-w]['0><v^'.indexOf(c)])>>5]|=1<<(p&31));for(p=z='';p<w*w;z+=' |-+'[b(p)?0:B(1,1)|B(w,2)||B(31,3)|B(33,3)],p++%w||(z+=`
`));return z}

document.getElementById("output0").innerHTML = f(">>>vvv<<<^^^");
document.getElementById("output1").innerHTML = f(">>>>>>vvvvv<<<<^^^>>v");
document.getElementById("output2").innerHTML = f("^^^^^vvv<<<^^vv>>>>>>>>vv>><<^^^^v>>>>v^<^");