JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" class="wave">
  <defs>
    <style>
      text.wave {
        font-family: system-ui,-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
        animation: wave 2.2s infinite running ease;
        transform-origin: 12% 20%;
        display: inline-block;
      }

      @keyframes wave {
          0%,60%,100% { transform: rotate( 0deg) }
         10%,30% { transform: rotate(10deg) }
         20% { transform: rotate(-8deg) }
         40% { transform: rotate(-6deg) }
         50% { transform: rotate(0deg) }
      }
    </style>
  </defs>
  <text class="wave" y="0.9em" fontSize="90px">👋</text>
</svg>