HTML, CSS, and Javascript for hexagonal progress bars with the HEX color gradient

HexBars.txt

<!-- HTML for hex progress bar -->

<div id="wrapper" class="center">
	<svg class="hex-progress noselect" data-progress="87.5" x="0px" y="0px" viewBox="0 0 776 628">
		<path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z" ></path>
		<path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z" stroke="url(#cl1)"></path>
		<text class="value" x="50%" y="61%">0%</text>
		<text class="text" x="50%" y="122%">Staked</text>
	</svg>

</div>


<svg width="0" height="0">
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
    <stop stop-color="#F0E618"/>
    <stop offset="100%" stop-color="#EB0FF6"/>
</linearGradient>
</defs>
</svg>



/*===== The CSS =====*/
.hex-progress{
	width: 200px;
	height: 240px;
}
.hex-progress .track, .hex-progress .fill{
	fill: rgba(0, 0, 0, 0);
	stroke-width: 30;
	transform: translate(290px, 800px)rotate(-120deg);
}
.hex-progress .track{
	stroke: rgb(56, 71, 83);
}
.hex-progress .fill {
	
	stroke-linecap: round;
	stroke-dasharray: 2160;
	stroke-dashoffset: 2160;
	transition: stroke-dashoffset 1s;
}
.hex-progress .value, .hex-progress .text {
	font-family: 'Open Sans';
	fill: rgb(255, 255, 255);
	text-anchor: middle;
}
.hex-progress .value {
	font-size: 180px;
}
.hex-progress .text {
	font-size: 120px;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
		cursor: default;
}

/* JAVASCRIIIIIIIPT */

var forEach = function (array, callback, scope) {
	for (var i = 0; i < array.length; i++) {
		callback.call(scope, i, array[i]);
	}
};
window.onload = function(){
	var max = 2160;
	forEach(document.querySelectorAll('.hex-progress'), function (index, value) {
	percent = value.getAttribute('data-progress');
		value.querySelector('.fill').setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
		value.querySelector('.value').innerHTML = percent + '%';
	});
}