<main class="overflow-hidden vh-100 flex items-center justify-center" style="background-color: #2C2D3D;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
      <defs>
        <filter id="squiggly-0">
          <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
        </filter>
        <filter id="squiggly-1">
          <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
        </filter>
        <filter id="squiggly-2">
          <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
        </filter>
        <filter id="squiggly-3">
          <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
        </filter>
        <filter id="squiggly-4">
          <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
        </filter>
      </defs>
    </svg>

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

    <defs>
      <clipPath id="left-slice-mask">
        <path
          d="M 441.6 405 A 113 113 0 1 1 441.6 195 Z" fill="#fff" />
      </clipPath>
      <clipPath id="right-slice-mask">
        <path
          d="M 441.6 195  A 113 113 0 0 1 441.6 405 Z" fill="#fff" />
      </clipPath>
    </defs>


    <g stroke="#EEB65A" stroke-width="2">
      
      <!-- Arc Strokes -->
      <path class="js-left-slice"
        d="M 441.6 405 A 113 113 0 1 1 441.6 195 Z" fill="none"  />

      <path class="js-right-slice"
        d="M 441.6 195  A 113 113 0 0 1 441.6 405 Z" fill="none" />

      <!-- Arc Fills -->
      <rect id="js-left-fill"
        x="441" y="187" width="154" height="226" fill="#EEB65A" clip-path="url(#left-slice-mask)" />

      <rect id="js-right-fill"
        x="441.6" y="187" width="72" height="226" fill="#EEB65A" clip-path="url(#right-slice-mask)" />
      
      <!-- Burst ball -->
      <circle id="js-burst" cx="348" cy="300" r="75" fill="#EEB65A" opacity="0" />

    </g>
  </svg>
</main>

.squiggle {
  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',
  LEFT_FILL: '#js-left-fill',
  RIGHT_FILL: '#js-right-fill',
  BURST: '#js-burst',
};

const DURATIONS = {
  JOIN: 800,
  SLIDE: 350,
  BURST: 1200,
  COMBINE: 300,
  SLIDE_OFF: 300,
};

const TIME = {
  JOIN_X: DURATIONS.JOIN,
  get JOIN() {
    return this.JOIN_X + DURATIONS.JOIN - 100;
  },
  get SLIDE() {
    return this.JOIN + DURATIONS.SLIDE;
  },
  get BURST() {
    return this.SLIDE + DURATIONS.BURST;
  },
  get COMBINE() {
    return this.BURST + DURATIONS.COMBINE;
  },
  get PULL_Y() {
    return this.COMBINE + DURATIONS.JOIN;
  },
};

const timeline = anime.timeline({
  loop: true,
  elasticity: 0,
});

const at = (offset, obj) => ({ ...obj, offset });

const leftSlice = {
  easing: 'easeInOutQuint',
  targets: EL.LEFT,
  translateX: [
    { value: -10, duration: 1 },
    { value: 0, duration: DURATIONS.JOIN },
    {
      value: -10,
      duration: DURATIONS.COMBINE,
      delay: TIME.BURST - DURATIONS.JOIN,
      easing: 'easeOutQuint',
    },
  ],
  translateY: [
    { value: -28, duration: 1 },
    { delay: TIME.JOIN_X, value: 0, duration: DURATIONS.JOIN },
    {
      delay: TIME.COMBINE - TIME.JOIN,
      value: -28,
      duration: DURATIONS.JOIN,
    },
  ],
  opacity: [
    { delay: TIME.SLIDE, value: 0, duration: 1 },
    { delay: TIME.BURST - TIME.SLIDE, value: 1, duration: 1 },
  ],
};

const leftFill = {
  easing: 'easeInOutQuint',
  targets: EL.LEFT_FILL,
  x: [
    {
      value: '-=154',
      duration: DURATIONS.SLIDE,
      delay: TIME.JOIN,
      easing: 'easeOutExpo',
    },
    {
      value: '+=154',
      duration: 1,
      easing: 'easeOutExpo',
    },
    {
      value: '-=154',
      duration: DURATIONS.COMBINE,
      delay: TIME.BURST - TIME.SLIDE,
      easing: 'easeOutQuint',
    },
    {
      value: '+=154',
      duration: DURATIONS.COMBINE,
      delay: TIME.PULL_Y - TIME.COMBINE,
      easing: 'easeOutCubic',
    },
  ],
  translateX: [
    { value: -10, duration: 1 },
    { value: 0, duration: DURATIONS.JOIN },
    {
      value: -10,
      duration: DURATIONS.SLIDE_OFF,
      delay: TIME.BURST - DURATIONS.JOIN,
      easing: 'easeOutQuad',
    },
  ],
  translateY: [
    { value: -28, duration: 1 },
    { delay: TIME.JOIN_X, value: 0, duration: DURATIONS.JOIN },
    {
      delay: TIME.COMBINE - TIME.JOIN,
      value: -28,
      duration: DURATIONS.JOIN,
    },
  ],
  opacity: [
    { delay: TIME.SLIDE, value: 0, duration: 1 },
    { delay: TIME.BURST - TIME.SLIDE, value: 1, duration: 1 },
  ],
};

const rightSlice = {
  easing: 'easeInOutQuint',
  targets: EL.RIGHT,
  translateX: [
    { value: 10, duration: 1 },
    { value: 0, duration: DURATIONS.JOIN },
    {
      value: 10,
      duration: DURATIONS.COMBINE,
      delay: TIME.BURST - DURATIONS.JOIN,
      easing: 'easeOutQuint',
    },
  ],
  translateY: [
    { value: 28, duration: 1 },
    { delay: TIME.JOIN_X, value: 0, duration: DURATIONS.JOIN },
    {
      delay: TIME.COMBINE - TIME.JOIN,
      value: 28,
      duration: DURATIONS.JOIN,
    },
  ],
};

const righttFill = {
  easing: 'easeInOutQuint',
  targets: EL.RIGHT_FILL,
  x: [
    {
      value: '-=72',
      duration: DURATIONS.SLIDE,
      delay: TIME.JOIN,
      easing: 'easeOutExpo',
    },
    {
      value: '+=72',
      duration: DURATIONS.COMBINE,
      delay: TIME.BURST - TIME.SLIDE,
      easing: 'easeOutQuint',
    },
  ],
  translateX: [
    { value: 10, duration: 1 },
    { value: 0, duration: DURATIONS.JOIN },
    {
      value: 10,
      duration: DURATIONS.COMBINE,
      delay: TIME.BURST - DURATIONS.JOIN,
      easing: 'easeOutQuint',
    },
  ],
  translateY: [
    { value: 28, duration: 1 },
    { delay: TIME.JOIN_X, value: 0, duration: 800 },
    {
      delay: TIME.COMBINE - TIME.JOIN,
      value: 28,
      duration: DURATIONS.JOIN,
    },
  ],
};

const burst = {
  easing: 'easeOutCubic',
  targets: EL.BURST,
  opacity: [{ value: 1, duration: 1 }, { delay: 1200, value: 0, duration: 1 }],
  scaleX: {
    value: 1.25,
    duration: DURATIONS.BURST / 2,
    delay: DURATIONS.BURST / 2,
    easing: 'easeInCubic',
  },
  translateX: [
    { value: '-=200', duration: DURATIONS.BURST / 2, easing: 'easeOutCubic' },
    { value: '+=182', duration: DURATIONS.BURST / 2, easing: 'easeInCubic' },
  ],
  r: { value: 22.5, duration: 400 },
};

timeline
  .add(at(0, leftSlice))
  .add(at(0, rightSlice))
  .add(at(0, leftFill))
  .add(at(0, righttFill))
  .add(at(TIME.SLIDE, burst));