infografiche-01_animated

In this example below you will see how to do a infografiche-01_animated with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ibanez182, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ibanez182 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>infografiche-01_animated</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg id="Livello_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
  <style>
  </style>
  <path class="st0 path_0" d="M139.6 122.2s4.2 21-17.7 25.5h-37s-12.5-2.7-16.3-14.2c-.8-2.5-1.2-5.4-1-8.7l2.9-14.5 4-21.2S76.6 73.9 93 73.5h22.7s14.7-.6 17.2 14.5l6.7 34.2zM113.7 51c1.6-.7 3.4-1.2 4.8-.7 3.8 1.2 5.7 5.6 5.7 5.6l-9.1 8.4H92.4l-5.5-5.2-3.5-3.1s2.5-3.9 6-5.2c.4-.1.8-.2 1.1-.3 1.5-.3 2.7-.2 3.7.2 0 0 2.5-4.4 9.8-4.1 7.4.3 9.7 4.4 9.7 4.4z"></path>
  <path class="st0 path_1" d="M70.6 110.2l3.3-17.4c-11.7-.5-22.3.7-30.6 2.3l-.2.9-3 14.5c-1.3 18.9 17.3 22.9 17.3 22.9h11.2c-.8-2.5-1.2-5.4-1-8.7l3-14.5z"></path>
  <path class="st1 path_2" d="M2.799999999999997,90A87.2,87.2 0,1,1 177.2,90A87.2,87.2 0,1,1 2.799999999999997,90"></path>
  <path class="st1 path_3" d="M64.9 50.1l-9-8.4s3-4.7 7.2-5.5c1.5-.3 2.7-.2 3.7.1 3.1.9 4.3 3.6 4.3 3.6"></path>
  <path class="st1 path_4" d="M66.8 36.4s2.5-4.4 9.8-4.1c7.3.3 9.6 4.5 9.6 4.5M81.4 39.8s2.3-1.9 4.9-3c1.6-.7 3.4-1.1 4.8-.7 3.8 1.2 5.7 5.6 5.7 5.6l-9.1 8.4M68.6 133.5H57.4s-18.5-4-17.3-22.9l3-14.5 4-21.2s2.1-15.1 18.5-15.6M87.6 50.1H64.9v9.1h22"></path>
  <path class="st1 path_5" d="M92.4 64.4l-5.5-5.2-3.5-3.2s2.5-3.9 6-5.2c.4-.1.8-.2 1.1-.3 1.5-.3 2.7-.2 3.7.2 3.1.9 4.3 3.6 4.3 3.6M94.3 50.6s2.5-4.4 9.8-4.1c7.3.3 9.6 4.5 9.6 4.5M108.9 54.1s2.2-1.9 4.9-3c1.6-.7 3.4-1.2 4.8-.7 3.8 1.2 5.7 5.6 5.7 5.6l-9.1 8.4M92.4 72.4v-8h22.7v8M93.1 73.4C76.7 73.8 74.6 89 74.6 89l-4 21.2-2.9 14.5c-.2 3.3.2 6.2 1 8.7 3.7 11.5 16.3 14.2 16.3 14.2h37c21.9-4.4 17.7-25.5 17.7-25.5l-6.5-34.3C130.7 72.7 116 73.3 116 73.3H93.1z"></path>
  <path class="st4 path_6" d="M78.8 95.3h50.5v36.5H78.8z"></path>
  <text transform="translate(82.343 116.748)" class="st3 st5 st6 text_0">1½</text>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ibanez182/infografiche-01_animated-wJMGgg */
svg {
  width: 180px;
  height: 180px;
}

.st0 {
  fill: #DBDFE3;
}

.st1 {
  fill: none;
  stroke: #85909B;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st2 {
  fill: none;
  stroke: #85909B;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

.st3 {
  fill: #85909B;
}

.st4 {
  fill: none;
}

.st5 {
  font-family: sans-serif !important;
}

.st6 {
  font-size: 30px;
}

.path_0,
.path_1 {
  opacity: 0;
  -webkit-animation: path_fade .3s ease-in-out 2s forwards;
          animation: path_fade .3s ease-in-out 2s forwards;
}

.text_0 {
  opacity: 0;
  -webkit-animation: path_fade .3s ease-in-out 2.2s forwards;
          animation: path_fade .3s ease-in-out 2.2s forwards;
}

.path_2 {
  stroke-dasharray: 549 551;
  stroke-dashoffset: 550;
  -webkit-animation: path_draw 2000ms linear 333ms forwards;
          animation: path_draw 2000ms linear 333ms forwards;
}

.path_3 {
  stroke-dasharray: 32 34;
  stroke-dashoffset: 33;
  -webkit-animation: path_draw 2000ms linear 500ms forwards;
          animation: path_draw 2000ms linear 500ms forwards;
}

.path_4 {
  stroke-dasharray: 213 215;
  stroke-dashoffset: 214;
  -webkit-animation: path_draw 2000ms linear 666ms forwards;
          animation: path_draw 2000ms linear 666ms forwards;
}

.path_5 {
  stroke-dasharray: 372 374;
  stroke-dashoffset: 373;
  -webkit-animation: path_draw 2000ms linear 833ms forwards;
          animation: path_draw 2000ms linear 833ms forwards;
}

.path_6 {
  stroke-dasharray: 174 176;
  stroke-dashoffset: 175;
  -webkit-animation: path_draw 2000ms linear 1000ms forwards;
          animation: path_draw 2000ms linear 1000ms forwards;
}

@-webkit-keyframes path_draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path_draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes path_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes path_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Comments