LLaMojis/Twemoji_animated_with_LLaMa/astonished_face_animated.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <style>
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    @keyframes eyebrow-move {
      0%, 100% { transform: translate(0); }
      50% { transform: translate(0, -1px); }
    }
    @keyframes face-change {
      0%, 100% { fill: #FFCC4D; }
      50% { fill: #FF9900; }
    }
    #eye1, #eye2 {
      animation: blink 3s ease-in-out infinite;
    }
    #eyebrow1, #eyebrow2 {
      animation: eyebrow-move 3s ease-in-out infinite;
    }
    #face {
      animation: face-change 3s ease-in-out infinite;
    }
  </style>
  <path id="face" fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/>
  <ellipse fill="#664500" cx="18" cy="27" rx="5" ry="6"/>
  <path id="eyebrow1" fill="#664500" d="M5.999 11c-.208 0-.419-.065-.599-.2-.442-.331-.531-.958-.2-1.4C8.462 5.05 12.816 5 13 5c.552 0 1 .448 1 1 0 .551-.445.998-.996 1-.155.002-3.568.086-6.204 3.6-.196.262-.497.4-.801.4z"/>
  <path id="eyebrow2" fill="#664500" d="M30.002 11c-.305 0-.604-.138-.801-.4-2.64-3.521-6.061-3.598-6.206-3.6-.55-.006-.994-.456-.991-1.005C22.006 5.444 22.45 5 23 5c.184 0 4.537.05 7.8 4.4.332.442.242 1.069-.2 1.4-.18.135-.39.2-.599.2z"/>
  <path id="mouth" fill="#F5F8FA" d="M18 23c-1.657 0-3 1.79-3 4h6c0-2.21-1.343-4-3-4z"/>
  <ellipse id="eye1" fill="#664500" cx="12" cy="14.5" rx="2.5" ry="3.5"/>
  <ellipse id="eye2" fill="#664500" cx="24" cy="14.5" rx="2.5" ry="3.5"/>
</svg>