SVG Animation 01

by davidxmartins

HTML

<div class="icon-container">

<svg class="icon-animation-proj" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.178 136.25">
<g>
<path class="icon-proj-stroke-1" d="M65.674,33.066a15.512,15.512,0,1,0,1.687-.091V9.407a59.215,59.215,0,1,0,29.4,7.835" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.688"/>

<line class="icon-proj-stroke-2a" x1="60.211" y1="62.228" x2="32.066" y2="114.999" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.688"/>

<line class="icon-proj-stroke-2b" x1="102.656" y1="114.999" x2="74.512" y2="62.229" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.688"/>

<path class="icon-proj-stroke-3" d="M37.821,78.31a37.842,37.842,0,0,0,59.08,0" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="13" fill-rule="evenodd"/>
</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-proj {
  stroke: white;
}

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

.icon-proj-stroke-2a {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw2 3s ease forwards;
  animation-delay: 2.2s; /* Adjust the delay as needed */
}
.icon-proj-stroke-2b {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw 3s ease forwards;
  animation-delay: 0.3s; /* Adjust the delay as needed */
}

.icon-proj-stroke-3 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease;
  animation: draw2 7s ease forwards;
  animation-delay: 2.5s; /* Adjust the delay as needed */
}

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

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