title: How can I create an image that I want to alter based on a percentage (svg or pure css)
body: <p>For the site I'm currently working on it has a zombie theme and people can submit things into a pot and a winner wins the pot.</p>
  
  <p>For the loading bar kind of thing I wanted to have a zombie, I was thinking the one from the left of this picture: <a href="http://2.bp.blogspot.com/-olXlVfHcfo0/VEWS4yHll6I/AAAAAAABEw8/YQdm7R2SpP8/s1600/Zombie%2BConrad%2Band%2BRhett.jpg" rel="nofollow">here</a></p>
  
  <p>I wanted to kind of fill it up with a fluid (kind of resembling blood) as people put stuff in, then when it fills to 100% the pot will be drawn.</p>
  
  <p>I was curious if I have to turn this image into an SVG or if I can recreate this image with CSS I wanted to have a liquid effect like wavy on top I was wondering what would be the best method for approaching this.</p>
  
  <p>If you need anymore information just ask. Thanks.</p>
  
  <p>I was thinking something like this: <a href="http://codepen.io/lbebber/pen/xrwja" rel="nofollow">http://codepen.io/lbebber/pen/xrwja</a></p>
  
  <p>My main question is: Can I convert this zombie image directly to CSS somehow or can I achieve this effect by turning it into a SVG and doing it some how? (I have no experience with using SVG)</p>
  
  <pre><code>Code pen link needs code apparently even though its not mine
  </code></pre>