<!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;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
