<section>
  <p data-splitting>Wrapped Text</p>
</section>
.char {
  offset-path: path('M 0 100 Q 50 50 150 100 Q 250 150 300 100');
  position: absolute;
  offset-distance: calc(var(--char-index) * 1.5rem);
}

section{
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
  font-size: 2rem;
  font-weight: bold;
}
svg {
  position: absolute;
  stroke-width: 2px;
}

body{
  background: Azure;
}

*{
  box-sizing: border-box;
}
Splitting({
	whitespace: true
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/splitting@1.0.6/dist/splitting.min.js