JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<pre id=p>

CSS

body,html{
  height:100%;
  width:100%;
}

body {
  background-color:#333;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

JavaScript

//c=e=>document.createElement(e),g=c`canvas`.getContext`2d`,v=c`video`,v.crossOrigin=v.loop=v.muted=v.src='https://fxi.io/n';id=setInterval(f=a=>{for(v.play(),i=0,w=20,g.drawImage(v,0,0,w,w),t++,o=``,l=f+o;i<l.length;a=g.getImageData(i%w,i/w,1,1).data,o+=(l[i++]+(i%w?``:`\n`)).fontcolor('#'+((a[0]<<16)|(a[1]<< 8)|a[2]).toString(16)));p.innerHTML=o},t=200)

//sin(t+((x-7.5)**2+(y-7.5)**2)/4)

//a?

//work
setInterval(f=x=>{for(g=document.createElement`canvas`.getContext`2d`,g.fillText(String.fromCodePoint(`0X1f31${t++%8+1}`),8,14),i=w=30,o=``,l=f+f;i<l.length;a=g.getImageData(i%w,++i/w,1,1).data,o+=i%w?l[i].fontcolor('#'+(a[0]<<16|a[1]<<8|a[2]).toString(16)):`\n`)p.innerHTML=o},t=99)


// work, long
//setInterval(f=x=>{for(C=document.createElement`canvas`,X=C.getContext`2d`,C.innerHTML='&#x1f31'+(t++%8+1)+';',X.fillText(C.innerText,8,14),i=w=30,o=``,l=f+f;i<l.length;c=l[i++],a=X.getImageData(i%w,i/w,1,1).data,o+=i%w?c.fontcolor('#'+(a[0]<<16|a[1]<<8|a[2]).toString(16)):`\n`)p.innerHTML=o},t=500)



//setInterval(f=a=>{for(v.play(),i=0,w=30,g.drawImage(v,0,0,w,w),t++,o=``,l=f+f;i<l.length;a=g.getImageData(i%w,i/w*2,1,1).data,o+=(l[i++]+(i%w?``:`\n`)).fontcolor((a[0]<<16|a[1]<< 8|a[2]).toString(16)));p.innerHTML=o},t=200)


//<body bgcolor='x' onload="()()"><pre id=p>
//`#`+((a[0]<<16)|(a[1]<< 8)|a[2]).toString(16)
//console.log(`\u1f31${t%8+1}`)