SVG Animation 3

by davidxmartins

HTML

<div class="icon-container">

<svg class="icon-animation-rehab" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.178 136.25">
<g>
<path class="icon-rehab__stroke-1" d="M9.655,52.772a59.106,59.106,0,1,1,1.552,34.659v0L67.089,31.545l55.586,55.586" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.688"/>
<line class="icon-rehab__stroke-2" x1="67.089" y1="37.942" x2="67.089" y2="124.442" fill="none" stroke-miterlimit="10" stroke-width="12"/>
<line class="icon-rehab__stroke-3a" x1="67.089" y1="101.997" x2="30.659" y2="65.567" fill="none" stroke-miterlimit="10" stroke-width="12"/>
<line class="icon-rehab__stroke-3b" x1="103.519" y1="65.567" x2="67.089" y2="101.997" fill="none" stroke-miterlimit="10" stroke-width="12"/>
<line class="icon-rehab__stroke-4a" x1="49.958" y1="88.518" x2="29.135" y2="109.341" fill="none" stroke-miterlimit="10" stroke-width="12"/>
<line class="icon-rehab__stroke-4b" x1="84.219" y1="88.518" x2="105.042" y2="109.341" fill="none" stroke-miterlimit="10" stroke-width="12"/>
</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-rehab {
  stroke: white;
}

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

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

.icon-rehab__stroke-3a {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw2 10s ease forwards;
  animation-delay: 2.8s; /* Adjust the delay as needed */
}
.icon-rehab__stroke-3b {
  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-rehab__stroke-4a {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw2 10s ease forwards;
  animation-delay: 3.5s; /* Adjust the delay as needed */
}

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

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