JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <title>JS1k, 1k demo submission [ID]</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <canvas id="c"></canvas>
        <script>
            var b = document.body;
            var c = document.getElementsByTagName('canvas')[0];
            var a = c.getContext('2d');
            document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
        </script>
    </body>
</html>

JavaScript

d=c.cloneNode(0),e=d.getContext("2d"),w=300,h=150,r=Math.random,c.width=d.width=w,c.height=d.height=h,e.fillRect(0,0,w,h),e.fillStyle="#FFF",e.font="100pt Arial",e.fillText("❤",92,116),function b(){x=0|r()*w,y=0|r()*h,h=(335+r()*40)%360,v=1+r()*.8,p=e.getImageData(x,y,1,1).data[0],p?(s=0|v*60,l=40):(s=0|v*60,l=0|v*80),a.fillStyle="hsl("+h+","+s+"%,"+l+"%)",a.fillText("❤",x,y),setTimeout(b,5)}()