JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<canvas id="c" width="500px" height="500px"></canvas>

CSS

body{
  background-color: #fff;
  margin: 0;
  overflow: hidden;
}

canvas{
  touch-action: none;
}

JavaScript

// https://codepen.io/SahilAFX/pen/LQaQPa

// Define an object that will be used to draw plus signs
var Plus = function() {
  this.x = 0;
  this.y = 0;

  this.top = 0;
  this.left = 0;

  this.height = 0;
  this.width = 0;
  this.scale = 1;
};

//Add draw method to the object
Plus.prototype.draw = function(ctx, x, y) {
  ctx.save();
  ctx.beginPath();
  ctx.setTransform(
    this.scale,
    0,
    0,
    this.scale,
    this.left + this.x,
    this.top + this.y
  );
  ctx.lineWidth = 2;

  ctx.moveTo(0, -this.height / 2);
  ctx.lineTo(0, this.height / 2);

  ctx.moveTo(-this.width / 2, 0);
  ctx.lineTo(this.width / 2, 0);

  ctx.stroke();
  ctx.closePath();
  ctx.restore();
};

var c = document.getElementById("c");
var context = c.getContext("2d");
var signs = [];
var mouse = { x: 0, y: 0 };
var gridLength = 12; // change number of signs here
var mouseOver = false;
var mouseMoved = false;

c.width = window.innerWidth;
c.height = window.innerHeight;

// Create sign grid using 2D array
for (var i = 0; i < gridLength; i++) {
  signs[i] = [];
  for (var j = 0; j < gridLength; j++) {
    var min = Math.min(c.width, c.height);
    signs[i][j] = new Plus();
    signs[i][j].left = c.width / (gridLength + 1) * (i + 1);
    signs[i][j].top = c.height / (gridLength + 1) * (j + 1);
    signs[i][j].width = min / 50;
    signs[i][j].height = min / 50;
  }
}

// Use GSAP ticker to call draw function on every frame that will draw signs to the canvas
// You can use requestAnimationFrame as well
TweenLite.ticker.addEventListener("tick", draw);

function draw() {
  context.clearRect(0, 0, c.width, c.height);

  if (mouseOver && mouseMoved) {
    calculateSigns();
    mouseMoved = false;
  }

  for (var i = 0; i < gridLength; i++) {
    for (var j = 0; j < gridLength; j++) {
      var sign = signs[i][j];
      sign.draw(context);
    }
  }
}

function calculateSigns() {
  for (var i = 0; i < gridLength; i++) {
    for (var j = 0; j < gridLength; j++) {
      var sign =...