Kevin Powell - CommunityKP-C
Kevin Powell - Communityā€¢16mo agoā€¢
11 replies
Chrissi | Freaky

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

Hey there! I want to make an animated text marker highlighter effect for headings on my website. I made some SVG's that I can animate using stroke-dashoffset, but if I have more than one short word, the SVG only centers in the text but does not grow in width. I tried setting width/height and some other attributes, but when it grows in width, the height grows to preserve the aspect ratio and overflows to the bottom of the span. Can anybody tell me how I can make the SVG "fill"/"stretch" in the width of the container? (Any other improvements of my code are appreciated too.)

Here is my code so far:
.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>
Was this page helpful?