docs/assets/banner.svg

<svg fill="none" viewBox="0 0 800 200" width="800" height="200" 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(1deg);
          }

          100% {
            transform: rotate(-1deg);
          }
        }

        @keyframes rotate2 {
          0% {
            transform: rotate(2deg);
          }

          100% {
            transform: rotate(-2deg);
          }
        }

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

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        @keyframes fadeIn {
          0% {
            opacity: 0;
          }

          66% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        .container {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin: 0;
          width: 100%;
          height: 200px;
          gap: 10px;

          font-family:
            system-ui,
            -apple-system,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji';

          background: linear-gradient(
            -45deg,
            #aeffbd,
            #2cff52,
            #00CB2D,
            #006900,
            #003C00,
            #172917
            );
          background-size: 700% 200%;
          animation: gradientBackground 8s ease infinite;
          border-radius: 10px;
          color: white;
          text-align: center;
        }

        h1 {
          font-size: 50px;
          line-height: 1.3;
          letter-spacing: 5px;
          text-transform: uppercase;
          text-shadow:
            0 1px 0 #efefef,
            0 2px 0 #efefef,
            0 3px 0 #efefef,
            0 4px 0 #efefef,
            0 12px 5px rgba(0, 0, 0, 0.1);
        }

        .shake {
          animation: rotate ease-in-out 1s infinite alternate;
        }

        .shake2 {
          animation: rotate2 ease-in-out 1s infinite alternate;
        }
      </style>
      <div class="container">
        <div class="shake2">
          <svg width="50px" height="50px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- change below. ideias: https://www.svgrepo.com -->
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>terminal_box_fill</title> <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Development" transform="translate(-912.000000, -48.000000)"> <g id="terminal_box_fill" transform="translate(912.000000, 48.000000)"> <path d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z" id="MingCute" fill-rule="nonzero"> </path> <path d="M3,5 C3,3.89543 3.89543,3 5,3 L19,3 C20.1046,3 21,3.89543 21,5 L21,19 C21,20.1046 20.1046,21 19,21 L5,21 C3.89543,21 3,20.1046 3,19 L3,5 Z M9.05037,15.5357 C8.65985,15.9262 8.02668,15.9262 7.63616,15.5357 C7.24563,15.1451 7.24563,14.512 7.63616,14.1214 L9.75748,12.0001 L7.63616,9.8788 C7.24563,9.48828 7.24563,8.85511 7.63616,8.46459 C8.02668,8.07406 8.65985,8.07406 9.05037,8.46459 L11.8788,11.293 C12.2693,11.6835 12.2693,12.3167 11.8788,12.7072 L9.05037,15.5357 Z M14.0001,14.0001 C13.4478,14.0001 13.0001,14.4478 13.0001,15.0001 C13.0001,15.5524 13.4478,16.0001 14.0001,16.0001 L16.0001,16.0001 C16.5524,16.0001 17.0001,15.5524 17.0001,15.0001 C17.0001,14.4478 16.5524,14.0001 16.0001,14.0001 L14.0001,14.0001 Z" id="形状" fill="#ffffff"> </path> </g> </g> </g> </g></svg>

          </svg>
        </div>
        <div>
          <p> </p>
        </div>
        <div class="shake shadow">
          <h1>moshell.sh</h1>
        </div>
      </div>
    </div>
  </foreignObject>
</svg>