JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<canvas id="stage"></canvas>

CSS

body{
  position: relative;
  overflow: hidden;
}

JavaScript

/**
 * Grid plotter
 */

let row_count = 5,
		col_count = 10;
    
let x_increment = 1 / (col_count),
		y_increment = 1 / (row_count);

let points = [];

for(let x_i = 0, y_i = 0; x_i <= col_count || y_i <= row_count; x_i++){

	if(x_i > col_count){
  	x_i = 0;
    y_i++;
    if(y_i > row_count){
    	break;
    }
  }
  
	points[points.length] = {
  	x: x_i * x_increment,
    y: y_i * y_increment,
    x_scale: 0.3 + (Math.random() * 0.7),
    y_scale: 0.3 + (Math.random() * 0.7),
    col: x_i,
    row: y_i,
  }

}

// Canvas
let stage = document.getElementById('stage');
let c = stage.getContext('2d');

let resizeStage = () => {

	stage.width = window.innerWidth;
	stage.height = window.innerHeight;
  from_x = target_x = current_x = Math.ceil(stage.width / 2);
  from_y = target_y = current_y = Math.ceil(stage.height / 2);
  
};

let fillBg = () => {

  c.fillStyle = '#fff';
  c.fillRect(0, 0, stage.width, stage.height);
  
};


let renderPoints = () => {

	c.strokeStyle = '#aaa';
  c.lineWidth = 1;

	for(let i = 0; i < points.length; i++){
  
  	// Bottom Right
    if(points[i].row < row_count && points[i].col < col_count){
  		c.fillStyle = c.strokeStyle = (i % 2 !== 0 ? '#ccc' : '#ddd');
    	c.beginPath();
    	c.moveTo(stage.width * points[i].x, stage.height * points[i].y);
    	c.lineTo(stage.width * points[i + 1].x, stage.height * points[i + 1].y);
    	c.lineTo(stage.width * points[i + col_count + 1].x, stage.height * points[i + col_count + 1].y);
    	c.lineTo(stage.width * points[i].x, stage.height * points[i].y);
      c.closePath();
      c.stroke();
      c.fill();
    }
    
  	// Top Left
    if(points[i].row > 0 && points[i].col > 0){
  		c.fillStyle = c.strokeStyle = (i % 2 === 0 ? '#bbb' : '#eee');
    	c.beginPath();
    	c.moveTo(stage.width * points[i].x, stage.height * points[i].y);
    	c.lineTo(stage.width * points[i - 1].x, stage.height * points[i - 1].y);
    	c.lineTo(stage.width * points[i - col_count - 1].x, stage.height * points[i -...