JSFiddle - React, Tailwind, and code Playground

by zoe chen

HTML

<canvas></canvas>

CSS

@import url(https://fonts.googleapis.com/css?family=Merriweather:700);
            body, html {
              padding: 0;
              margin: 0;
            }
            
            h1 {
              font-size: 4em;
              color: white;
              font-family: 'Merriweather', serif;
              letter-spacing: 2px;
              pointer-events: none;
              font-weight: 700;
              position: absolute;
              top: 30%;
              left: 0;
              right: 0;
              text-align: center;
            }

JavaScript

var canvas = document.querySelector("canvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var ctx = canvas.getContext("2d");
            
            var TAU = 2 * Math.PI;
            
            times = [];
            function loop() {
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              update();
              draw();
              requestAnimationFrame(loop);
            }
            
            function Ball (startX, startY, startVelX, startVelY) {
              this.x = startX || Math.random() * canvas.width;
              this.y = startY || Math.random() * canvas.height;
              this.vel = {
                x: startVelX || Math.random() * 2 - 1,
                y: startVelY || Math.random() * 2 - 1
              };
              this.update = function(canvas) {
                if (this.x > canvas.width + 50 || this.x < -50) {
                  this.vel.x = -this.vel.x;
                }
                if (this.y > canvas.height + 50 || this.y < -50) {
                  this.vel.y = -this.vel.y;
                }
                this.x += this.vel.x;
                this.y += this.vel.y;
              };
              this.draw = function(ctx, can) {
                ctx.beginPath();
                ctx.globalAlpha = .4;
                ctx.fillStyle = '#448fda';
                ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
                ctx.fill();
              }
            }
            
            var balls = [];
            for (var i = 0; i < canvas.width * canvas.height / (65*65); i++) {
              balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height));
            }
            
            var lastTime = Date.now();
            function update() {
              var diff = Date.now() - lastTime;
              for (var frame = 0; frame * 16.6667 < diff; frame++) {
                for (var index = 0;...