README.2.svg

<svg
  fill="none"
  viewBox="0 0 800 100"
  width="800"
  height="100"
  xmlns="http://www.w3.org/2000/svg"
>
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        @keyframes rotate {
          0% {
            transform: rotate(10deg);
          }
          100% {
            transform: rotate(-10deg);
          }
        }

        @keyframes gradientBackground {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .container {
          font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
            Arial, gfdsx sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 0;
          width: 100%;
          height: 100px;
          background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
          background-size: 600% 400%;
          animation: gradientBackground 10s ease infinite;
          border-radius: 10px;
          color: white;
          text-align: center;
        }

        .hand {
          font-size: 2.5rem;
          animation: rotate 180ms infinite alternate;
        }
      </style>
      <div class="container">
        <div>Hi there!</div>
        <div class="hand">👋</div>
      </div>
    </div>
  </foreignObject>
</svg>