CODEWITHSUNDEEP
htmlanimationsvgpathstroke
thomas01f
thomas01f

Reputation: 25

SVG stroke animation increase length

I've been searching (unsuccessfully) all over the internet on how to achieve a certain SVG path animation. I re-used a codepen by Chris Coyier, from his CSS Tricks article. In my edited version, I have achieved the desired effect, but very roughly, and it's a very "hack-through" method that it's definitely not efficient.

The pen: https://codepen.io/anon/pen/zEZpPK (Visualize in Chrome)

The idea: Animate an SVG stroke so that, it begins with length 0 (a dashOffset equal to the path total length), so there's nothing rendered. Then, decrease the dashOffset gradually untill the whole SVG stroke is revealed. So far, no problems, that is a pretty common effect in fact. But I want to add something extra: The "Starting point" of the stroke must also offset gradually, to achieve an effect like the one in the Pen.

The specific requirement, is that the stroke can pass by the starting point Twice, and that the stoke length reaches 100% as it passes the second time by the Starting point, like it does (not with presicion) in the Pen.

The way I achieved it: It's rather complicated to write it down. You can explore the Pen and see for yourself what I did. Perhaps for a better understanding you can edit the stroke color of the SVG with ID Layer_3 to something different from white and black to visualize how the animations fire. However, I'll try to explain:

I copied the original SVG and pasted it twice in the HTML file, so there were 3 SVGs in the document, each one on top of the other. The one in the middle, has a white stroke, the other 2 have a black stroke. This second SVG, the one in the middle, has an animation that lasts twice the time of the animation of the 1st SVG. Then, the 3rd SVG animation lasts the same as the 1st, but it has an animation delay of the same length the 1st animation completion time.

It's a very ineffective solution, but it works just fine to illustrate what I'm trying to achieve.

The question: Is there any way to achieve such effect? Having the stroke moving across the path as it increases in size till it reaches the full path length?

I have though maybe using TweenMax (GSAP) along the dashOffset animation to try morphing the SVG path gradually from a single anchor, to the fully constructed path, and have the dashOffset animation starting at minus .getTotalLength(), up to, zero. But the morphing effect isn't really what is needed, more like a slice function that takes a single anchor and adds more anchors (following the path data) until the path becomes a closed shape. But again, I have found no information about such effect.

Perhaps I'm facing a limitation with SVGs. However, if anyone has an idea or knows a website where this effect is described, please let me know.

Upvotes: 1

Views: 2578

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

It can be done with just one SVG. IMO it is probably simplest to just forget about dash offset and just animate the dash array.

Due to the fact that part way through the animation, you need an array that is

gap - stroke - gap

you'll need to use a dasharray that has four values (stroke gap stroke gap).

Note that it is also important to use values in your dash array that match your path length. In your case, your path length is 821.6. So I am using a value of 822 for simplicty - which is close enough.

.path1 {
  stroke-dasharray: 0;
  animation: dash 5s linear;
}
/* 821.6 */

@keyframes dash {
  0% {
    stroke-dasharray: 0 0 0 822;
  }
  25% {
    stroke-dasharray: 0 205.5 205.5 822;
  }
  50% {
    stroke-dasharray: 0 411 411 822;
  }
  75% {
    stroke-dasharray: 411 205.5 822 822;
  }
  100% {
    stroke-dasharray: 822 0 822 822;
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path1" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z"/> 
  
</svg>

Upvotes: 4

Related Questions