Here is an example I made using JavaScript. No matter what dimensions the page is, each brick will always be a 5:2 ratio and there will always be 20 bricks across the page.
<!doctype html>
<html>
<body>
<svg id="wall" style="position:absolute;top:0;left:0;" width="100%" height="100%" onload="renderBackground();" onresize="renderBackground();">
</svg>
<script>
var wall=document.getElementById("wall");
function renderBackground()
{
var width=window.innerWidth;
wall.innerHTML="";
for(y=0;y<window.innerHeight;y+=width/25)
{
// Even Bricks
for(x=0;x<width;x+=width/20)
{
createBrick(x,y,width/20,width/50);
}
// Odd Bricks
for(x=0-width/40;x<width;x+=width/20)
{
createBrick(x,y+width/50,width/20,width/50);
}
}
}
function createBrick(x,y,width,height)
{
var brick=document.createElementNS(wall.namespaceURI,"rect");
var shine=document.createElementNS(wall.namespaceURI,"rect");
var drain=Math.random()*24;
wall.appendChild(brick);
wall.appendChild(shine);
brick.setAttribute("x",x);
brick.setAttribute("y",y);
brick.setAttribute("width",width);
brick.setAttribute("height",height);
shine.setAttribute("x",x+width/20);
shine.setAttribute("y",y+height/10);
shine.setAttribute("width",9*width/10);
shine.setAttribute("height",height/10);
brick.setAttribute("style","fill:"+rgb(6*Math.random()+128-drain,12*Math.random()+128-drain,6*Math.random()+128-drain)+";stroke:"+rgb(51,51,68)+";stroke-width:"+String(height/20));
shine.setAttribute("style","fill:"+rgb(160,160,160));
}
function rgb(r,g,b)
{
return "rgb("+String(Math.floor(Math.max(Math.min(r,256),0)))+","+String(Math.floor(Math.max(Math.min(g,256),0)))+","+String(Math.floor(Math.max(Math.min(b,256),0)))+")";
}
</script>
</body>
</html>
If I were to generate this exact same page with php, removing the JavaScript entirely, how could I force the bricks to keep the same 5:2 ratio without needing to call renderBackground() to redraw and adjust their size every time the window is resized?
I would like to know how to do this on all elements, not just SVG.
Thanks!
