Kevin Powell - Community•2mo ago

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;
  }
}

.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>

    <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>

9 Replies

dys 🐙•2mo ago

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

MDN Web Docs

preserveAspectRatio - SVG: Scalable Vector Graphics | MDN

The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.

Chrissi | Freaky•2mo ago

I tried the XminYmin meet but that did not help at all. Or can youe explain to me what you mean exactly?

Chrissi | Freaky•2mo ago

It looks like this for example.

dys 🐙•2mo ago

Try preserveAspectRatio="none".

Chrissi | Freaky•2mo ago

I think that does the trick, 😄 still need to do some fine-tuning but now it stenches finally. I did not know I could set it to none... 😄 Thanks a lot. Do you have any improvements for my code? Or for my plan at all? Just being curious for better solutions.

dys 🐙•2mo ago

Your plan seems reasonable to me. You might look at the pathLength attribute. That would let you set something like pathLength="1" & then you wouldn't have to use trial & error to determine what dash-offset & dash-array need to be. Also, it would let you more easily reuse the CSS for different paths. (I used the same effect when converting a PDF to EPUB a while back. The cover image appears static, but after about 30 seconds it unwinds itself & then comes back.)

Chrissi | Freaky•2mo ago

Ohhhh thats smart! Thanks a lot! @dys 🐙 Do you maby know if i can make a pattern for my path to give it a brush/marker look? I know how to define a pattern but when i use it as stroke on my path I only see a part of the brush and not the brush appearing "multiple times" after each other. I currently look on how to make a dash array from my path.

Chrissi | Freaky•2mo ago

https://codepen.io/FreakeyPlays/pen/BagXXzm Thats how far I have come with a path and apllying a pattern to the stroke, but I cannot get the edges to show the Pattern it is always a flat cut and the pattern just repeats itself on the y axis.

Chris

CodePen

Untitled

...

Chrissi | Freaky•2mo ago

https://blog.tentaclelabs.com/posts/2022/04/draw-a-pattern-along-a-path-using-svg Found this what looks promising but I cant get it to work rn. have to try later

Tentacle Labs Blog

Draw a pattern along a path using SVG | Tentacle Labs Blog

Recently I wanted to create the effect of a cable for an application I’m working on. The cable should have a textile look, similar to a rope, which is quite common right now (for example the charging cable of the current MacBook Pro). I’m using SVG for rendering, so applying a pattern to a stroke path should be easy, right?

Gaming

Programming

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