Textmarker Highlight Effect (Stretch SVG over width of a span element)

.highlight {
  position: relative;
  display: inline-block;
}

.highlight svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.highlight svg path {
  stroke-dasharray: 4013;
  stroke-dashoffset: 0;

  animation: markerEffect var(--duration) ease-in-out 1s;
  animation-iteration-count: 1;
}

@keyframes markerEffect {
  from {
    stroke-dashoffset: 4013;
  }
  to {
    stroke-dashoffset: 0;
  }
}

    <h1>
      Hello
      <span class="highlight" style="--duration: 1000">
        World this is a text
        <svg
          viewBox="0 0 1640 664"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m114 233c0 0 1367.2 1.1 1396.7 58.9 29.5 57.7-1321.6 123.9-1296.5 161 25 37.1 1293.5 12.9 1293.5 12.9"
            stroke="#C8D20A"
            stroke-width="150"
            stroke-linecap="round"
            />
        </svg>
      </span>
      , from John Doe.
    </h1>