K-ungh visual

by Bjolja

HTML

<!DOCTYPE html>
<html>
<body>
Fyll i avståndet från toppen av tanken i cm mellan 0 och <span id="heightOfTank"></span>: <input id="distance" /><br />
<svg width="100" height="350" id="cylinder">
  <linearGradient id="green">
    <stop offset="0%" stop-color="#cbffcb" />
    <stop offset="15%" stop-color="#9cecab" />
    <stop offset="21%" stop-color="#00d228" />
    <stop offset="90%" stop-color="#00d228" />
    <stop offset="100%" stop-color="#51e862" />
  </linearGradient>
  <linearGradient id="yellow">
    <stop offset="0%" stop-color="#fffdcb" />
    <stop offset="15%" stop-color="#ebec9c" />
    <stop offset="21%" stop-color="#cbd200" />
    <stop offset="90%" stop-color="#cbd200" />
    <stop offset="100%" stop-color="#dfe851" />
  </linearGradient>
  <linearGradient id="red">
    <stop offset="0%" stop-color="#ffcbcb" />
    <stop offset="15%" stop-color="#ec9c9c" />
    <stop offset="21%" stop-color="#d20000" />
    <stop offset="90%" stop-color="#d20000" />
    <stop offset="100%" stop-color="#e85151" />
  </linearGradient>
   <rect id="placeholderOfTank" width="100" height="300" stroke-width="4" stroke="black" fill="white" />
   <!--<polygon points="0,300 105,300 50,350" style="fill:green;stroke:rgb(0,0,0);stroke-width:3" />-->
   <rect id="contentOfTank" x="2" fill="red" />
   <text x="35px" y="325" fill="black" id="bottom" font-family="monospace"></text>
   Sorry, your browser does not support inline SVG.
</svg> 
 
</body>
</html>

JavaScript

var heightOfTank = 50; //In cm
document.getElementById('heightOfTank').innerHTML = heightOfTank;
var tbDistance = document.getElementById("distance");
tbDistance.addEventListener("change", function() {
	drawContent(tbDistance.value);
});

var drawContent = function(distance){
  var rectContentOfTank =  document.getElementById('contentOfTank');
  var rectplaceholderOfTank =  document.getElementById('placeholderOfTank');
  var textBottom =  document.getElementById('bottom');
  var svg = document.getElementById('cylinder');
  
  var strokeWidth = rectplaceholderOfTank.getAttributeNS(null, "stroke-width");
  
  function drawHeight(distanceToSurface){
    var heightOfContent = heightOfTank - distanceToSurface; //In cm
    var percentFilled = heightOfContent / heightOfTank;
    var previousHeight = rectContentOfTank.getAttributeNS(null, "height") || 0;
    var heightOfCylinder = rectplaceholderOfTank.getAttributeNS(null, "height");    
    var svgHeightOfContent = parseInt(heightOfCylinder * percentFilled);
    textBottom.innerHTML = parseInt(percentFilled * 100) + "%";
    
    function draw(currentHeight){
      rectContentOfTank.setAttributeNS(null, 'height', currentHeight);
      var colorToFill = percentFilled < 0.5 ? "url(#yellow)" : "url(#green)";
      if(percentFilled < 0.25) colorToFill = "url(#red)";
      
      rectContentOfTank.setAttributeNS(null, 'fill', colorToFill);
      rectContentOfTank.setAttributeNS(null, 'y', heightOfCylinder - currentHeight - (strokeWidth / 2) + 2);
      if(currentHeight > svgHeightOfContent) currentHeight--;
      if(currentHeight < svgHeightOfContent) currentHeight++;
      if(currentHeight != svgHeightOfContent) setTimeout(function() { draw(currentHeight); }, 5);
      
    }
    draw(previousHeight);
	}
  
  drawHeight(distance);
  
  rectContentOfTank.setAttributeNS(null, 'width', 96);
}

drawContent(0);

window.setInterval(function(){
	drawContent(Math.floor(Math.random() * (heightOfTank + 1)));
}, 5000);


/*var...