<canvas id="c" width="600" height="600"></canvas>

<script type="text/javascript">
/*
// c is defined by browser since canvas has id c
t=c.getContext('2d')
s=600 // square canvas size
p=80 // number of points, lines and margins!
g=(s-2*p)/p // gap between each point and line
for(i=0;i<p;i++){
  for(k=0;k<p;k++){
    u=Math.pow(2*( // upper limit
    k<p/2 // detect half way point on each line
    ?k // from 0 to 0.5
    :p-k // from 0.5 to 1
    ),3)/p/700 // power it up to spike at halfway point, and divide by magic number to keep it within range
    l=u/1.5 // lower limit, slightly below upper limit
    t[k?'lineTo':'moveTo']( // first node in line do a move to, otherwise line to.
    p+k*g, // x
    p+(i-(l+Math.random()*(u-l)))*g // y
    )
  }
}
t.fillRect(0,0,s,s)
t.strokeStyle='#fff'
t.fill()
t.stroke()
*/
t=c.getContext('2d'),s=600,p=80,g=(s-2*p)/p;for(i=0;i<p;i++){for(k=0;k<p;k++){u=Math.pow(2*(k<p/2?k:p-k),3)/p/700,l=u/1.5;t[k?'lineTo':'moveTo'](p+k*g,p+(i-(l+Math.random()*(u-l)))*g)}};t.fillRect(0,0,s,s);t.strokeStyle='#fff';t.fill();t.stroke();
</script>