SVG Animation 2

by davidxmartins

HTML

<div class="icon-container">

<svg class="icon-animation-constr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.178 136.25">
<g>

<path class="icon-constr__stroke-1" d="M67.5,33.615V8.406a59.215,59.215,0,1,0,29.4,7.835" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.688"/>

<path class="icon-constr__stroke-2" d="M86.166,52.284A18.669,18.669,0,1,1,67.5,33.615h7.344" fill="none" stroke-miterlimit="10" stroke-width="14.688"/>

<line class="icon-constr__stroke-3" x1="67.497" y1="100" x2="67.497" y2="70.952" fill="none" stroke-miterlimit="10" stroke-width="14.688"/>

<line class="icon-constr__stroke-4a" x1="35.974" y1="95.918" x2="70" y2="95.918" fill="none" stroke-miterlimit="10" stroke-width="14.688"/>

<line class="icon-constr__stroke-4b" x1="65" y1="95.918" x2="99.02" y2="95.918" fill="none" stroke-miterlimit="10" stroke-width="14.688"/>
</g>
</svg>

</div>

CSS

body {
  background: darkgreen;
}

.icon-container {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icon-animation-constr {
  stroke: white;
}

.icon-constr__stroke-1 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw 3s ease forwards;
}

.icon-constr__stroke-2 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw 3s ease forwards;
  animation-delay: 1s; /* Adjust the delay as needed */
}

.icon-constr__stroke-3 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw 4.2s ease forwards;
  animation-delay: 0.3s; /* Adjust the delay as needed */
}

.icon-constr__stroke-4a {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw 4s ease forwards;
  animation-delay: 1.2s; /* Adjust the delay as needed */
}

.icon-constr__stroke-4b {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw2 10s ease forwards;
  animation-delay: 3.9s; /* Adjust the delay as needed */
}

@keyframes draw {
  to {
    stroke-dashoffset: 1000;
  }
}
@keyframes draw2 {
  to {
    stroke-dashoffset: 0;
  }
}