<div class="container">
  <svg class="roots-logo" xmlns="http://www.w3.org/2000/svg" width="100" height="95" viewBox="-10 -10 100 95">
    <path stroke="#525ddc" stroke-width="2" fill="transparent" fill-rule="nonzero" d="M56.604 59.32c-5.97-5.962-9.26-13.89-9.26-22.318V23.958a.815.815 0 1 0-1.631 0c0 8.43-3.286 16.36-9.255 22.32L16.743 65.961a.813.813 0 0 0-.237.643.81.81 0 0 0 .34.6C23.665 72.05 31.672 74.61 40 74.61s16.338-2.56 23.157-7.406a.79.79 0 0 0 .334-.6.796.796 0 0 0-.227-.643l-6.66-6.64zm-35.38-48.398V.816A.813.813 0 0 0 20 .11C7.663 7.242-.001 20.484-.001 34.67c0 1.136.06 2.352.188 3.718.032.312.24.58.537.694a.979.979 0 0 0 .278.044.816.816 0 0 0 .574-.236L15.32 25.164a19.997 19.997 0 0 0 5.903-14.242zM59.997.11a.808.808 0 0 0-.816 0 .82.82 0 0 0-.408.706v36.186c0 5.378 2.103 10.437 5.911 14.242l6.655 6.65a.82.82 0 0 0 .579.241c.022 0 .046 0 .07-.005a.852.852 0 0 0 .601-.338C77.437 50.979 80 42.985 80 34.669 80 20.484 72.341 7.242 59.998.11zM28.377 38.203L8.662 57.894a.815.815 0 0 1-.579.241c-.021 0-.044 0-.065-.005a.827.827 0 0 1-.596-.338 39.91 39.91 0 0 1-2.962-4.84.824.824 0 0 1 .15-.957l18.793-18.76c5.967-5.965 9.253-13.887 9.253-22.313a.816.816 0 0 1 1.631 0v13.036c0 5.38-2.097 10.44-5.91 14.245z"></path>
  </svg>
</div>
html,
body {
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
anime({
  targets: '.roots-logo path',
  strokeDashoffset: {
    value: [anime.setDashoffset, 0],
    delay: (el, i) => i * 250,
    duration: 3000,
    easing: 'easeInOutSine',
  },
  fill: {
    value: ['#fff', '#525ddc'],
    delay: 750,
    duration: 750,
    easing: 'easeInOutQuad',
  },
  strokeWidth: {
    value: [2, 0],
    delay: 750,
    duration: 775,
    easing: 'easeInOutQuad',
  },
  loop: true,
  direction: 'alternate',
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js