<canvas id="c"></canvas>
<!-- https://generativeartistry.com/tutorials/cubic-disarray/ -->

html{display:grid;height:100vh}
body{ margin: auto }

const ctx = c.getContext('2d')
const dpr = window.devicePixelRatio
const size = window.innerWidth / 4
const squareSize = 30
const randomDisplacement = 15
const rotateMultiplier = 20
const offset = 10

c.width = size * dpr
c.height = size * dpr
ctx.scale(dpr, dpr)
ctx.lineWidth = 2

function draw(width, height) {
  ctx.beginPath()
  ctx.rect(-width/2, -height/2, width, height)
  ctx.stroke()
}

for(let i = squareSize; i <= size - squareSize; i += squareSize) {
  for(let j = squareSize; j < size - squareSize; j += squareSize) {
    
    let plusOrMinus = Math.random() < 0.5 ? -1 : 1
    const rotateAmt = j / size * Math.PI / 180 * plusOrMinus * Math.random() * rotateMultiplier

    plusOrMinus = Math.random() < 0.5 ? -1 : 1
    const translateAmt = j / size * plusOrMinus * Math.random() * randomDisplacement
    
    ctx.save()
    ctx.translate(i + translateAmt + offset, j + offset)
    ctx.rotate(rotateAmt)
    draw(squareSize, squareSize)
    ctx.restore()
  }
}