SVG Animatetion Test

by davidxmartins

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 152.097 151.935" class="paint-icon">
  <path d="M3.114,46.027a65.993,65.993,0,0,0,63.068,85.908h.006A65.957,65.957,0,0,0,98.848,8.73a6.844,6.844,0,0,0-6.79,11.886,52.307,52.307,0,0,1,12.131,81.2l-.478.507-9.068-17,.3-.262a44.609,44.609,0,0,0,5.328-5.567,6,6,0,0,0-9.36-7.509c-.473.589-.992,1.183-1.634,1.867l-.478.51-6.827-12.8.249-.261a22.237,22.237,0,0,0,6.173-15.4A22.486,22.486,0,0,0,72.405,24.489l-.357-.106V.284Q68.992,0,65.94,0A66,66,0,0,0,3.114,46.027ZM82.564,92.714l.418-.169,9.806,18.387-.417.242q-1.09.632-2.216,1.217a51.676,51.676,0,0,1-23.985,5.858h-.007a52.758,52.758,0,0,1-26.414-7.116l-.417-.242,9.784-18.347.418.17a44,44,0,0,0,33.03,0ZM76.753,82.085a31.957,31.957,0,0,1-21.409,0L54.8,81.89l7.446-13.963.352.055a22.514,22.514,0,0,0,6.9,0l.352-.055L77.3,81.891ZM66.048,37.25a8.656,8.656,0,1,1-8.656,8.656A8.666,8.666,0,0,1,66.048,37.25ZM59.485,14.1l.563-.071V24.382l-.357.106A22.486,22.486,0,0,0,43.7,45.906,22.231,22.231,0,0,0,49.878,61.3l.249.262L43.3,74.363l-.478-.51c-.647-.691-1.167-1.285-1.634-1.867a6,6,0,1,0-9.36,7.509,44.609,44.609,0,0,0,5.328,5.567l.3.262-9.045,16.958-.478-.507A52.273,52.273,0,0,1,59.485,14.1Z" fill="transparent" stroke="#fff" stroke-width="2">
  </path>
</svg>

CSS

body {background: darkgrey}

.paint-icon path {
  stroke-dasharray: 675; /* Adjusted for a full circle */
  stroke-dashoffset: 675; /* Adjusted for a full circle */
  animation: draw 4s ease forwards;
}

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