<div class="frame">
  <div id="canvas"></div>
</div>

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame {
  width: 250px;
  height: 250px;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  position: relative;
}

canvas {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 6px 2px rgba(0,0,0,0.22);
}

const sketch = function(p) {
  let step = 25;
  
  function formula(x, y) {
    const leftToRight = Math.random() >= 0.5; 
    p.stroke('#FFFFFF');
    if (leftToRight) {
      p.line(x, y, x + step, y + step);
    } else {
      p.line(x + step, y, x, y + step);
    }
  }
  
  p.setup = function() {
    p.createCanvas(250, 250);  
    p.background('#A5E0E5');
    for (let x = 0; x < p.width; x += step) {
      for (let y = 0; y < p.width; y += step) {
        formula(x, y);
      }
    }
  }
}

new p5(sketch, document.getElementById('canvas'));