JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="20 0 603 380" xml:space="preserve" id="svg-skills-expertise">
	
	<polyline id="axes" points="59,0 59,337.299 603,337.299"/>
	<g id="v-bars" transform="translate(0, 337.299) scale(1, -1)">
		<rect class="light" x="67" y="0" width="59.858" height="309.522"/>
		<rect class="dark" x="135.021" y="0" width="59.858" height="276.484"/>
		<rect class="light" x="203.041" y="0" width="59.857" height="227.168"/>
		<rect class="dark" x="271.061" y="0" width="59.858" height="201.097"/>
		<rect class="light" x="339.082" y="0" width="59.857" height="140.743"/>
		<rect class="dark" x="407.102" y="0" width="59.857" height="295.851"/>
		<rect class="light" x="475.121" y="0" width="59.859" height="321.301"/>
		<rect class="dark" x="543.143" y="0" width="59.857" height="165.981"/>
	</g>

	<g id="y-axis">
		<g class="circles">
			<circle cx="59" cy="16.001" r="3"/>
			<circle cx="59" cy="76.355" r="3"/>
			<circle cx="59" cy="136.709" r="3"/>
			<circle cx="59" cy="197.062" r="3"/>
			<circle cx="59" cy="257.417" r="3"/>
		</g>
	</g>
</svg>

CSS

@font-face {
				font-family: 'Novecentowide';
				src: url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.eot');
				src: url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.woff') format('woff'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.ttf') format('truetype'),
					 url('http://point-online.nl/cv/fonts/Novecento%20wide%20Medium/Novecentowide-Medium-webfont.svg#NovecentowideMedium') format('svg');
				font-weight: 600;
				font-style: normal;
			
			}
            svg:hover {cursor:pointer; background-color: #eee;}
            h1,
			.text-svg text,
			.text-svg text tspan {fill:#839197; font-family:Novecentowide; font-weight:600; font-size:12px;}
			circle {fill:#005B88;}
			polyline {fill:none; stroke:#839197; stroke-miterlimit:10;  }
			rect {width:159.858;}
			text {text-align:right;}
			.light {fill:#009ADE;}
			.dark {fill:#0071AA;}
			.axes {stroke:#005B88; stroke-linecap:round;}

JavaScript

/* SVG ARRAY Solved !!! \\\\\\\\\ */
/* Marcos  approach. How to store an array of height values and use them in another script */

var origHeight = [];
$(function(){
    var $theBars = $("#v-bars").children();
    var BarsHeight = $theBars.each(function(index, element ) {
        origHeight.push($(this).attr("height"));
        console.log (origHeight);
    });
    $theBars.attr("height", 0);
    $("#svg-skills-expertise").click(function() {
        $theBars.each(function(index, element){
            console.log(index);
            console.log(element);
            $(this).css("MyH",$(this).attr("height")).delay(index * 50).animate(
            {
                MyH:origHeight[index]
            },
            {
                step:function(v1){
                    $(this).attr("height",v1)
                }
            });
        })
        console.log ("Yeap clicked it!");
    });
});