SVG Path Animation With CSS

Created: 2023-07-14

Today I learned to animate SVG paths with CSS. A simple effective trick to make your SVGs come alive.

First, you need to create the SVG path. I use Inkpad (inkpad.art) for that.

<svg xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="60 200 250 100">
  <path class="anim" fill="none" stroke="#000" stroke-linecap="round" stroke-width="12.0641" d="M215.495 270.701c-24.663-21.322-44.707-46.213-72.134-64.899-12.467-8.494-29.564-21.026-45.7507-19.002-12.2355 1.529-14.5603 14.827-14.0321 24.995.9838 18.938 12.1878 38.895 30.2568 46.335 54.393 22.397 73.694-76.882 131.406-53.936 6.082 2.418 11.879 5.365 17.101 9.355 33.103 25.287 28.423 76.553-20.317 70.014-10.369-1.39-18.805-6.184-26.53-12.862Z"/>
</svg>

Get the path length:

console.log(document.querySelector('.anim').getTotalLength())

add a bit of CSS:

.anim {
   stroke-dasharray: 546.2;
   stroke-dashoffset: 546.2;
   animation: draw 4s ease-in-out infinite;
}

@keyframes draw {
   from { stroke-dashoffset: 0;}
  
   50% { stroke-dashoffset: 546.2;}
  to { stroke-dashoffset: 0;}
}

Enjoy