Pattern

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    background: #1b1b1b;
    padding: 10px;
}

JavaScript

var canvas = document.getElementById( 'canvas' );
var image = document.getElementById( 'image' );
var ctx = canvas.getContext( '2d' );
var dim = 8;
var x, y, n, d2 = Math.floor( dim / 2 );

canvas.width = window.innerWidth - 40;
canvas.height = window.innerHeight - 40;

ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
    
for ( y = 0; y < canvas.height; y += dim ) {
    
    for ( x = 0; x < canvas.width; x += dim ) {
        
        ctx.save();
        ctx.translate( x + d2, y + d2 );
        ctx.rotate( Math.PI * 0.25 + Math.floor( Math.random() * 4 ) * Math.PI * 0.5 );
        
        ctx.beginPath();
        ctx.moveTo( -d2, 0);
        ctx.lineTo( d2, 0 );
        ctx.stroke();
        ctx.restore();
    }
}