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

  <svg class="w-100 mw7 center squiggle" viewBox="0 0 800 600" fill="#EEB65A">
    
    <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>

    <circle cx="400" cy="300" r="113" fill="#EEB65A" />
  </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");
  }
}

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