<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
<!--   <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<!--   </defs> -->

  <text>
    <textPath
      href="#MyPath"
      fill="#ffffff">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  font-family: 'Lobster', cursive;
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

svg {
  width: 100vmin;
  
  textPath {
/*     font-family: monospace; */
/*     letter-spacing: 2px; */
  }
}