The hourglass challenge The Hourglass

This hourglass has 60 "sands of time", and it completely fills each chamber. The clock is 19 characters wide and 13 characters in height. Each chamber has 5 rows of sand and there is a row in the centre that can hold 1 sand. The top row can hold 17 sands, the next one 15 and so on (see below). Sands fall in to the bottom chamber at the rate of one sand per second.

       START                     3 SECONDS LATER               38 SECONDS LATER

███████████████████            ███████████████████            ███████████████████
█.................█   17       █..............   █   14       █                 █    0
██...............██   15       ██...............██   15       ██               ██    0
███.............███   13       ███.............███   13       ███.......      ███    7  
█████.........█████   09       █████.........█████   09       █████.........█████   09 
███████.....███████   05       ███████.....███████   05       ███████.....███████   05 
█████████.█████████   01       █████████.█████████   01       █████████.█████████   01 
███████     ███████            ███████  .  ███████            ███████  .  ███████  
█████         █████            █████    .    █████            █████    .    █████   
███             ███            ███      .      ███            ███....         ███
██               ██            ██               ██            ██...............██  
█                 █            █                 █            █.................█  
███████████████████            ███████████████████            ███████████████████   


The Challenge

Display the hourglass (no numbers or headings are required) after a certain period of time (0 ≤ t ≤ 60).

Coding Rules


The hourglass should look exactly as shown here. You may replace the █ character and/or the . character with whatever you like to fit your language (Unicode, ASCII compatibility issues).
The input should be a number such as 45 or 7. Display the clock after these many seconds.
The output can either be displayed or saved to a file. No extra text or labels as shown above are required - just the hourglass is all we need.
If the user enters t > 60, you don't have to handle the error.


Points


Shortest code wins.
JavaScript (ES6), 203  208 233 270 256 characters
Edit Revised using a loop instead of a sequence of calls.
Edit Added top and bottom row that were missing.
A function returning the output. Run the snippet in Firefox to test.


f=w=&gt;[h='█'[R='repeat'](19),...[17,15,13,9,5,1,5,9,13,15,17].map((d,i)=&gt;(t=i&gt;5?-v:v,v-=i&lt;5?d:1-d,e=' '[R](d/2),b='█'[R](10-d/2),b+('.'[R](t&lt;d&amp;&amp;d-t)+e+' .'[i&gt;4&amp;w&gt;i-6&amp;t&gt;=d|0]+e).slice(0,d)+b),v=w),h].join`
`

// Less golfed
F=
w=&gt;[h='█'.repeat(19),
    ... [17, 15, 13, 9, 5, 1, 5, 9, 13, 15, 17].map(
     (d,i) =&gt; (
       t = i&gt;5 ? -v : v,
       v -= i&lt;5 ? d : 1-d, 
       e = ' '.repeat(d / 2),
       b = '█'.repeat(10 - d / 2),
       b + 
        ('.'.repeat(t &lt; d &amp;&amp; d - t) 
         + e + ' .'[i &gt; 4 &amp; w &gt; i-6 &amp; t &gt;= d | 0]
         + e).slice(0,d)
       + b
     ), v = w
    ),
    h].join('\n')

// TEST            

O.innerHTML=f(+I.value)

function tick(d) {
  var i=+I.value+d
  I.value=i
  O.innerHTML=f(i)
}

var int=0;

function auto()
{
  function go()
  {
    var t = I.value;
    O.innerHTML=f(++t)
    if (t&gt;70)t=0;
    I.value = t;
  }
  if (A.checked &amp;&amp; !int)
  { 
    int = setInterval(go, 200);
  }
  else if (!A.checked &amp;&amp; int)
  {
    clearInterval(int);
    int = 0;
  }
}
input[type=text] { width: 3em }
&lt;button onclick='tick(-1)'&gt;-&lt;/button&gt;
&lt;input type=text id=I value=0 onchange='tick(0)' &gt;
&lt;button onclick='tick(1)'&gt;+&lt;/button&gt;
&lt;input type=checkbox id=A onclick='auto()'&gt;Fly time
&lt;pre id=O&gt;&lt;pre&gt;