<main class="overflow-hidden vh-100 flex items-center justify-center" style="background-color: #2C2D3D;">

  <svg class="w-100 mw7 center" viewBox="0 0 800 600" fill="#fff">

    <g stroke="#EEB65A" stroke-width="3" transform="translate(-16 0)">
      <path id="js-left-slice"
        d="M 441.6 405 A 113 113 0 1 1 441.6 195 Z" fill="none"  />
      
      <circle cx="441.6" cy="405" r="6" stroke="#fff" fill="#2C2D3D" />
      <circle cx="441.6" cy="195" r="6" stroke="#fff" fill="#2C2D3D" />
    </g>
    
    <g stroke="#EEB65A" stroke-width="3" transform="translate(16 0)">
      <path id="js-right-slice"
        d="M 441.6 195  A 113 113 0 0 1 441.6 405 Z" fill="none" />
      
      <circle cx="441.6" cy="405" r="6" stroke="#fff" fill="#2C2D3D" />
      <circle cx="441.6" cy="195" r="6" stroke="#fff" fill="#2C2D3D" />
    </g>
  </svg>
</main>
.squiggle {
  -webkit-animation: squigglevision 0.3s infinite;
  animation: squigglevision 0.3s infinite;
}

/**
 * from: https://tympanus.net/codrops/2016/03/21/animated-animals-css-svg/
 */
@keyframes squigglevision {
  0 {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
const EL = {
  LEFT: '#js-left-slice',
  RIGHT: '#js-right-slice',
};

anime({
  targets: EL.LEFT,
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 3000,
  loop: true,
  direction: 'alternate',
});

anime({
  targets: EL.RIGHT,
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 3000,
  loop: true,
  direction: 'alternate',
});
  
  
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.6.2/tachyons.min.css

External JavaScript

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