a=document.getElementById("canvas");
a.width=500;
a.height=500;
b=document.body;
c=a.getContext("2d");
r=Math.random,m=(s=65)-1,g=[...Array(s)].map(_=>Array(s).fill(0)),h=(x,y)=>((g[x]||[])[y])||-1,A=a=>(b=(a.filter(c=>c!=-1))).reduce((d,c)=>d+c,0)/4;(f=(a,b,c,d)=>{if((b=a/2)<1)return;c=.3*a;for(y=b;y<m;y+=a)for(x=b;x<m;x+=a)g[x][y]=A([h(x-b,y-b),h(x+b,y-b),h(x+b,y+b),h(x-b,y+b)])+r()*c*2-c;for(y=0;y<m;y+=b)for(x=(y+b)%a;x<m;x+=a)g[x][y]=A([h(x,y-b),h(x+b,y),h(x,y+b),h(x-b,y)])+r()*c*2-c;f(a/2);})(m)
c.translate(100, 100);
c.fillStyle = "green";
var size = 20;
var height = 10;
var px = s/2|0;
var pz = s/2|0;
var py = 30;
for(var z = s-3; z > 0; z--) {
for (var x = 0; x < s-3; x++) {
var zz1 = z / s * 3;
var zz2 = (z+1) / s * 3;
if (zz1<=0 || zz2 <= 0) continue;
c.beginPath();
c.moveTo((x-px)*size/zz1, (h(x,z)+py)*height/zz1);
c.lineTo((x+1-px)*size/zz1, (h(x+1,z)+py)*height/zz1);
c.lineTo((x+1-px)*size/zz2, (h(x+1,z+1)+py)*height/zz2);
c.lineTo((x-px)*size/zz2, (h(x, z+1)+py)*height/zz2);
c.lineTo((x-px)*size/zz1, (h(x, z)+py)*height/zz1);
c.closePath();
c.fill();
c.stroke();
}
}
<body>
<canvas id="canvas"></canvas>
</body>