improve_in.svg

<svg fill="none" viewBox="0 0 1200 40" width="1200" height="40" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .container {
          --color-main: #bcbaba;

          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 32px; 

          color: var(--color-main);

          display: flex;
          justify-content: center;
          align-items: center;
          
          font-weight: lighter; 
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          letter-spacing: .2rem;
        }

        @media (prefers-color-scheme: light) {
          .container {
            --color-main: #121212;
          }
        }
      </style>

      <div class="container">
        I'd love to improve my skills in
      </div>
    </div>
  </foreignObject>
</svg>