JSFiddle - React, Tailwind, and code Playground

by Imran Bughio

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<canvas id="canvas" width="600" height="600"></canvas>

CSS

html,
      body {
        height: 100%;
      }
      
      body {
        font-family: monaco, Consolas, "Lucida Console", monospace;
        background: #000;
      }
      
      canvas {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateZ(0);
      }

JavaScript

canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
			
      ctx.translate(0.5, 0.5);
      
      var i = 0;
      var iInc = 0.005;
      var range = 0.5;
      
      raf = window.requestAnimationFrame(draw);
			
      function draw() {
        var animInc = EasingFunctions.easeInQuad(i) * 250;
        ctx.clearRect(0, 0, 600, 600);
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = '#fff';
        var rectInc = 10 + animInc;

        // Avoid Half Pixel
        rectIncFloat = rectInc % 1; // Getting decimal value.
        rectInc = rectInc - rectIncFloat; // Removing decimal.

        // console.log(rectInc);
        ctx.rect(rectInc, rectInc, 130, 60);
        ctx.stroke();
        ctx.closePath();

        ctx.font = "14px arial";
        ctx.fillStyle = '#fff';
        ctx.textAlign = 'center';
        ctx.fillText("MAIN BUTTON", 65.5 + rectInc, 35.5 + rectInc);

        i += iInc;

        if (i >= 1) {
          iInc = -iInc;
        }
        if (i <= 0) {
          iInc = Math.abs(iInc);
        }

        raf = window.requestAnimationFrame(draw);
      }


      // Easing
      EasingFunctions = {
        // no easing, no acceleration
        linear: function(t) {
          return t
        },
        // accelerating from zero velocity
        easeInQuad: function(t) {
          return t * t
        },
        // decelerating to zero velocity
        easeOutQuad: function(t) {
          return t * (2 - t)
        },
        // acceleration until halfway, then deceleration
        easeInOutQuad: function(t) {
          return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
        },
        // accelerating from zero velocity 
        easeInCubic: function(t) {
          return t * t * t
        },
        // decelerating to zero velocity 
        easeOutCubic: function(t) {
          return (--t) * t * t + 1
        },
        // acceleration until halfway, then deceleration 
        easeInOutCubic:...