public/writer.svg

<svg fill="none" viewBox="0 0 1000 200" width="1000" height="200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 0;
          width: 100%;
          height: 200px;
          background-color: #24292f;
          border-radius: 10px;
          color: #ffffff;
          text-align: center;
        }
        
        .line-1 {
          width: 100%;
          margin: 0 auto;
          border-right: 3px solid #ffffff;
          font-size: 36px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
        }
        
        /* Animation */
        .anim-typewriter {
          animation: typewriter 4s steps(16) 1s 1 normal both,
            blinkTextCursor 1000ms steps(20) infinite normal;
        }
        @keyframes typewriter {
          from {
            width: 0;
          }
          to {
            width: 100%;
          }
        }
        @keyframes blinkTextCursor {
          from {
            border-right-color: #ffffff;
          }
          to {
            border-right-color: transparent;
          }
        }
			</style>
      <div class="container">
        <span>
          <p class="line-1 anim-typewriter">长风破浪会有时，直挂云帆济沧海。</p>
        </span>
      </div>
    </div>
  </foreignObject>
</svg>