JSFiddle - React, Tailwind, and code Playground

by nsjithin

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg id="music" width="500" height="300"></svg>

JavaScript

var s = Snap("#music");

var config = {
    width: 30,
    height: 150,
    high_height: 10,
    padding_top: 50,
    padding_left:10
};

function animateBar(el, height) {
    el.animate({
        y: config.padding_top + config.high_height+ (config.height - height),
        height: height
    }, 100, function () {
        animateBar(el, parseInt(config.height * Math.floor(Math.random() * 100) / 100, 10));
        //setTimeout(animateBar(el, parseInt(config.height*Math.floor((Math.random() * 100) + 0)/100)), 1000);
    }, mina.easeout);
}


for (i = 0; i < 6; i++) {
    var bar = s.rect((i + 1) * config.padding_left + i * config.width, config.padding_top + config.high_height, config.width, config.height);
    var g = s.gradient("L(100, 50, 100, 250)#f00:5-#fc0-#0b0");
    bar.attr({
        fill: g
    });
    
    var high = s.rect((i + 1) * config.padding_left + i * config.width, config.padding_top, config.width, config.high_height);
    animateBar(bar, 10);
}