🔥 Making a fire-particle effect using emojis

fire-emoji.html

<style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}</style>
<canvas id=c width=1080 height=1080></canvas>
<script>
x=c.getContext`2d`,lfr=1,S=Math.sin,C=Math.cos,T=Math.tan,R=(r,g,b,a=1)=>`rgba(${r|0},${g|0},${b|0},${a})`,t=f=nfm=0;z=t=>{

c.width|=0
t||(e=500,R=Math.random,a=new Array(e).fill({X:e,Y:e,}).map((b,i)=>({...b,Z:R()*(-Math.PI),T:0})))
x.font="1in'"
for(d of a)(t>d.T?(d.T=t+R(),d.X=e,d.Y=e):0,x.fillText('🔥',d.X+=C(d.Z),d.Y+=S(d.Z)*3))

};loop=fTime=>{requestAnimationFrame(loop);if(lfr&&fTime<nfm-2)return;nfm=Math.max(nfm+1e3/60,fTime);t=f/60;if(t*60|0!=f++)t+=1e-6;z(t)};loop()
</script>