A CodePen by Abdur Jabbar. Animated frequency spectrum

index.html

<div id="bars">
<p></p>
</div>
<div id="colors">
  <input id="red" type="range" min="0" max="255" />
  <input id="green" type="range" min="0" max="255" />
  <input id="blue" type="range" min="0" max="255" />
  <input id="opacity" type="range" min="0" max="100" />
  <input id="space" type="range" min="0" max="50" value="12"/>
  <input id="numBars" type="range" min="0" max="10" value="5" />
</div>

script.js

var space = $('p').width() + 2;
var numBars = 5;
update();
function update(){

$('#bars').html('<p></p>');

for (i = 0; i < numBars; i++)
{
  $('<p></p>').insertAfter('p');
}  
  
$('p').each(function(index, element){
  $(this).css('left', (index * space) + 'px');
});
}

setInterval(function(){
  $('p').each(function(){
    $(this).css('height', function(){
      return (Math.random() * 150)
    });
  });
},150);

$('input').change(function(){
  var red = $('#red').attr('value');
  var green = $('#green').attr('value');
  var blue = $('#blue').attr('value');
  var opacity = $('#opacity').attr('value') / 100;
  space = $('#space').attr('value');
  numBars = $('#numBars').attr('value');
  update();
  
  $('p').css('background-image', '-webkit-linear-gradient(bottom, rgba(' + red + ',' + green + ',' + blue + ',' + opacity + '), transparent)');
});



update();

style.css

#bars {
  position: fixed;
  bottom: 10%;  
  transform: rotate(180deg);
  transform-origin: center center;
  right: 1%;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

p {
  display: inline-block;
  position: absolute;
  left: 10px;
  width: 10px;
  height: 20px;
  background-image: -webkit-linear-gradient(bottom, black, transparent);
  -webkit-mask-image: -webkit-linear-gradient(bottom, red, black);
  transition: all .5s linear;
  
}

p:hover {
  height: 100px; 
}

input:before {
  content: attr(id);
  padding: 20px;
  text-transform: capitalize;
}