JSFiddle - React, Tailwind, and code Playground

by zoe chen

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee"/>
    <path d="M 35 40 A 15 15 180 1 1 65 40" style="fill:none; stroke: #e9e8ee; stroke-width: 5;" />
     <!-- <circle cx="40" cy="60" r="2.5" style="fill: #fff;" /> -->
     <!-- <circle cx="60" cy="60" r="2.5" style="fill: #fff;" /> -->
     <circle cx="50" cy="70" r="15" class="mouthClass" />
     
     <path id="eyeleft" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;"/>
     <path id="eyeright" d="M 35 65 A 15 15 90 0 1 40 60" style="fill: none; stroke-width: 0;"/>
     <circle class="eye" cx="" cy="" r="2.5" style="fill:#fff;">
       <animateMotion
       dur=".8s"
       repeatCount="indefinite"
       keyPoints="0;0;1;1"
       keyTimes="0;0.1;0.7;1"
       calcMode="linear"
       >
         <mpath xlink:href="#eyeleft"/>
       </animateMotion>
     </circle>
     <circle class="eye" cx="" cy="" r="2.5" style="fill:#fff;">
       <animateMotion
       dur=".8s"
       repeatCount="indefinite"
       keyPoints="0;0;1;1"
       keyTimes="0;0.1;0.7;1"
       calcMode="linear"
       >
         <mpath xlink:href="#eyeright"/>
       </animateMotion>
     </circle>
  </svg>
</div>

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 50 50">
    <circle fill="none" stroke="#EC008C" stroke-width="2" stroke-dasharray="5" cx="25" cy="25" r="19.5">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25 " dur="10s" repeatCount="indefinite" />
    </circle>
  </svg>
</div>

<svg height="100" width="100" viewBox="0 0 24 24">
  
  <g fill="#A4ACB4" fill-rule="evenodd">
        <path d="M10.879 10.879l3.535-3.536a3 3 0 1 1 4.246 4.239l-7.078 7.079a3 3 0 0 1-4.237-4.248 1 1 0 0 0-1.415-1.414 5 5 0 0 0 7.066 7.076l7.079-7.079A5 5 0 0 0 13 5.93L9.464...

CSS

.mouthClass{
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  transform: rotate(0deg);
  transform-origin: 50px 70px;
  /* transform-origin: top left; */
  stroke-dashoffset: -23;
  stroke-dasharray: 42, 95;
  /* stroke-dasharray: 30, 30; */
  animation: mouth .8s infinite;
}
@keyframes mouth {
  0% {
    transform: rotate(0deg);
    stroke-dasharray: 42, 95;
    stroke-dashoffset: 0;
  }
  40% {
    transform: rotate(280deg);
    stroke-dasharray: 60, 95;
    stroke-dashoffset: 0;
  }
  70%, 100% {
    transform: rotate(280deg);
    stroke-dashoffset: -23;
    stroke-dasharray: 42, 95;
  }
}

JavaScript

// <circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;" />