JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<canvas></canvas>

CSS

body {
  margin: 0;
}

canvas {
  background: salmon;
}

JavaScript

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var size = 320;
var step = 10;
var dpr = window.devicePixelRatio;
canvas.width = size * dpr;
canvas.height = size * dpr;
context.scale(dpr, dpr);

context.lineCap = 'square';
context.lineWidth = .1;

function draw(x, y, width, height) {
  var leftToRight = Math.random() >= 0.5;

  if(leftToRight) {
    context.moveTo(x, y);
    context.lineTo(x + width, y + height);    
  } else {
    context.moveTo(x + width, y);
    context.lineTo(x, y + height);
  }

  context.stroke();
}

for(var x = 0; x < size; x += step) {
  for(var y = 0; y < size; y+= step) {
    draw(x, y, step, step);    
  }
  
}