parchment

by jcubed111

HTML

<canvas id="main"></canvas>

CSS

body{
    margin: 0;
    overflow: hidden;
    background: #000;
}

JavaScript

const canvas = document.getElementById('main');
const w = canvas.width = innerWidth;
const h = canvas.height = innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#d19e56';
ctx.fillRect(0, 0, w, h);

for(let i=0; i < 500; i++) {
	if(i%2) {
    	ctx.globalCompositeOperation = 'multiply';
        ctx.fillStyle = '#00000006';
    }else{
    	ctx.globalCompositeOperation = 'screen';
        ctx.fillStyle = '#ffffff05';
    }
    
    ctx.beginPath();
    let cx = Math.random()*w;
    let cy = Math.random()*h;
    let steps = Math.floor(5 + Math.random()*5);
    for(let t=0; t<=steps; t++) {
    	let r = 50 + Math.random()*250;
    	ctx.lineTo(
        	cx + r * Math.cos(Math.PI*2*t/steps),
            cy + r * Math.sin(Math.PI*2*t/steps),
    	);
    }
    ctx.fill();
}

ctx.globalCompositeOperation = 'color';
ctx.fillStyle = '#d19e56';
ctx.fillRect(0, 0, w, h);



ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = '#fff4';
for(let i=0; i<400000/w; i++) {
	[
    	[0, Math.random()*h],
    	[w, Math.random()*h],
    	[Math.random()*w, 0],
    	[Math.random()*w, h],
    ].forEach(([x, y]) => {
    	ctx.save();
        ctx.translate(x, y);
        ctx.rotate(Math.random()*Math.PI*2);
        let r = Math.random()*20;
        ctx.fillRect(-r, -r, 2*r, 2*r);
        ctx.restore();
    })
}