<span id="note">Note: Tested in Chrome / Firefox</span>
<h1>Animated Hexagonal Progress Bar</h1>
<div id="containerpctbox">
  <div class="pctbox" data-percent="78">
  <svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
      <defs>
    <linearGradient id="lineargr" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
    <path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
    <svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
    <path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="48">
  <svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
   <svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
    <path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="95">
  <svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
   <svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
    <path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
<div class="pctbox" data-percent="20">
  <svg class="hexa-progress" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" ><path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
   <svg class="hexa-progress-bg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewbox="0 0 173.20508075688772 200" >
    <path  fill="#fff" d="M77.94228634059948 4.999999999999999Q86.60254037844386 0 95.26279441628824 4.999999999999999L164.54482671904333 45Q173.20508075688772 50 173.20508075688772 60L173.20508075688772 140Q173.20508075688772 150 164.54482671904333 155L95.26279441628824 195Q86.60254037844386 200 77.94228634059948 195L8.660254037844387 155Q0 150 0 140L0 60Q0 50 8.660254037844387 45Z"></path></svg>
<span class="percent"><span class="pctamount"></span><span>%</span></span>
</div>
</div>
<button id="randomize">
  <span class="cont-svg-btn">
  <svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none">
									<path d="M290,95C290,106.04599999999999,281.046,115,270,115C270,115,180,115,150,115C120,115,30,115,30,115C18.954,115,10,106,10,95C10,86.285,10,69.125,10,60.5C10,52.875,10,37.726,10,30C10,18.375,18.954,10,30,10C30,10,120,10,150,10C180,10,270,10,270,10C281.046,10,290,18.954,290,30C290,37.25,290,52.875,290,60.5C290,69.125,290,84.5,290,95C290,95,290,95,290,95"></path>
								<desc>Created with Snap</desc><defs></defs></svg>
      </span>
  <span class="svg-btn-text">Random</span>

</button>
<a target="_blank" href="https://twitter.com/alaricweb" id="twitterlink"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.54 186.25"><defs><style>.cls-1{fill:#fff;stroke:#044db5;stroke-miterlimit:10;}.cls-2{fill:#010002;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M74.55,2.88A15.44,15.44,0,0,1,91,2.88l65.82,38A15.44,15.44,0,0,1,165,55.13v76a15.44,15.44,0,0,1-8.23,14.25L91,183.38a15.44,15.44,0,0,1-16.45,0l-65.82-38A15.44,15.44,0,0,1,.5,131.13v-76A15.44,15.44,0,0,1,8.73,40.88Z"/><path class="cls-2" d="M138.24,58.73a45.45,45.45,0,0,1-13.07,3.58,22.85,22.85,0,0,0,10-12.58,45.88,45.88,0,0,1-14.46,5.53A22.78,22.78,0,0,0,81.94,76,64.61,64.61,0,0,1,35,52.22a22.79,22.79,0,0,0,7,30.38,22.76,22.76,0,0,1-10.31-2.86V80A22.78,22.78,0,0,0,50,102.35a23.05,23.05,0,0,1-6,.8,21.84,21.84,0,0,1-4.28-.42A22.77,22.77,0,0,0,61,118.53a45.66,45.66,0,0,1-28.26,9.73,48.37,48.37,0,0,1-5.43-.31,64.33,64.33,0,0,0,34.89,10.24c41.87,0,64.75-34.68,64.75-64.75l-.08-2.95A45.45,45.45,0,0,0,138.24,58.73Z"/></g></g></svg></a>
@import url('https://fonts.googleapis.com/css?family=Satisfy');
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
#note{
  color:#cccccc;
  top:10px;
  left:10px;
  position:fixed;
}
html,body{
  background:#05010a;
  height:100%;
  font-family: 'Open Sans';
}

#twitterlink{
  bottom:30px;
  right:20px;
  position: fixed;
  height:40px;
  width:40px;
}

#twitterlink .cls-1{
  fill:url(#lineargr);
}

h1{
      background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
  background-image: linear-gradient(to right, #0575E6, #00F260);
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
      width: 450px;
  font-size:26px;
    text-align: center;
    display: block;
    margin: 0 auto;
  margin-top:25px;
  font-familly:"Open Sans";
}
.hexa-progress,.hexa-progress-bg{
  position:absolute;
  width:140px;
  overflow: visible;
  opacity:0;
  stroke-linecap: round;
}
.hexa-progress path{
  stroke-width:4px;
  stroke: url(#lineargr);
  fill:none;
}
.hexa-progress-bg path{
  stroke-width:4px;
  opacity:0.2;
  stroke: url(#lineargr);
  fill:none;
}
.percent{
    background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
  background-image: linear-gradient(to right, #0575E6, #00F260);
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  position:absolute;
  font-size:45px;
  opacity:0;
    font-family: 'Satisfy', cursive;
}
#containerpctbox{
  display:grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 0px;
  align-content: center;	
  height:300px;
}
.pctbox{
  position:relative;
}
#randomize{
    background: none;
    border: none;
    width: calc(200px / 2);
    height:calc(83.75px / 2);
    left:calc(50% - 50px);
    bottom:20px;
    outline: none;
    position: absolute;
    margin: 1em;
    padding: 0;
    cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cont-svg-btn{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cont-svg-btn path{
  fill:none;
  stroke-width:4px;
  stroke:url(#lineargr);
}
.svg-btn-text{
    display: block;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 100;
    font-size: 1.5em;
    color: #fff;
    font-weight: bold;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  background-image: -webkit-linear-gradient(to right, #0575E6, #00F260);
  background-image: linear-gradient(to right, #0575E6, #00F260);
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

@media screen and (max-width: 810px) {
  #containerpctbox{
     grid-template-columns: 33% 33% 33%;
  }
  .pctbox:nth-child(4){
    display:none;
  }
}

@media screen and (max-width: 630px) {
  #containerpctbox{
     grid-template-columns: 50% 50%;
  }
  .pctbox:nth-child(3){
    display:none;
  }
}


@media screen and (max-width: 390px) {
  #containerpctbox{
     grid-template-columns: 100%;
  }
  .pctbox:nth-child(2){
    display:none;
  }
  h1{
    width:auto;
  }
}
TweenMax.set('.hexa-progress,.hexa-progress-bg',{
  xPercent:"-50%",
  yPercent:"-50%",
  left:"50%",
  top:"50%",
  opacity:1
});

TweenMax.set('.percent',{
  xPercent:"-50%",
  yPercent:"-50%",
  left:"50%",
  top:"50%",
  marginTop:5,
  opacity:1
});

function drawProgress(){
  $.each($('.pctbox'),function(index, value){
    var endPercent = $(this).data("percent");
    var hex = $(this).find('.hexa-progress path');
    var chiffre = $(this).find('.pctamount');
    var percent = {curvalue:0};

    TweenMax.fromTo(percent,2.5,{opacity:0},{opacity:1,delay:0.5,curvalue:endPercent,roundProps:"curvalue",ease: Power4.easeOut,onUpdate:function(){
      chiffre.text(percent.curvalue);
    }});
    TweenMax.fromTo(hex,2.5,{drawSVG:false},{delay:0.5,ease: Power4.easeOut,
      drawSVG:"0% "+endPercent+"%"
    });
  });
}
drawProgress();

$('#randomize').mouseup(function(){
  TweenMax.to('.hexa-progress path',0.4,{drawSVG:false, onComplete:function(){
      $.each($('.pctbox'),function(){
        $(this).data('percent',Math.random()*100);
      });
      drawProgress();
  }});
  TweenMax.to('#randomize',0.4,{scale:1,transformOrigin:"50% 50%"});
}).mousedown(function(){
  TweenMax.to('#randomize',0.4,{scale:0.95,transformOrigin:"50% 50%"});
});

TweenMax.to('#twitterlink,#randomize',1,{scale:1.2,repeat:-1,transformOrigin:"50% 50%",yoyo:true});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/RoundPropsPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/TweenMaxv1.20.3.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/DrawSVGPlugin.31102017.min.js