CODEWITHSUNDEEP
animationsvgpath
Lee Williams
Lee Williams

Reputation: 1

Animating stroke-dashoffset can't close shape

I'm making a simple spinner using the dash-offset animation technique. you can see what i have here. As you can see the polygon shape never closes. Is there any simple way to ensure the path completes the shape instead of leaving the miter corner at the top.

I could over shoot the path int he SVG so it overlaps to complete that final corner. Unfortunately you can see it overdraw in the animation which isn't ideal.

HTML

<div class="logo-container">
  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
  </svg>
</div>

CSS

.logo-container {
  width: 400px;
  .is2-logo path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  .blue-path {
    animation: dash 2s linear forwards infinite;
  }
  .gray-path {
    animation: dash 2s linear forwards infinite .5s;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0; 
  }
  100% {
    stroke-dashoffset: -1000; 
  }
}

Upvotes: 0

Views: 312

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

Why don't you just extend the path by another leg, leaving the dash offset the same:

  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3 l106.08 -61.04 106.08 61.04" marker-end="url(#gray-start)"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225 l106.08 61.04 -106.08 61.032 L15.724 70.265 l106.08 -61.04 106.08 61.04"/>
  </svg>

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101820

completes the shape instead of leaving the miter corner at the top.

Actually it's leaving butt line-caps at the top.

Why don't you just make the blue path have round line-caps like the grey one has?

.logo-container {
  width: 400px;
}
.logo-container .is2-logo path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.logo-container .blue-path {
  animation: dash 5s linear forwards infinite;
}
.logo-container .gray-path {
  animation: dash 5s linear forwards infinite .5s;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}
<div class="logo-container">
  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linecap="round" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
  </svg>
</div>

Upvotes: 1

Related Questions