<svg viewBox="0 0 60 36">
  <defs>
    <path id="p" d="M-2,2 Q13,7 30,1 T62,2" fill="none" />
    
  <polygon id="t" points="30,4 45,30 15,30"/>
  </defs>
  
  <use xlink:href="#t" class="triangle triangle--back" points="25,4 40,30 10,30"/>
  
<!--   <circle data-lengthy cx="25" cy="20" r="10" /> -->
  
<!--   <path class="L" d="M23.5,15 v8 h5" /> -->
  
  <g stroke="#FFF">
    <use class="stripe" data-lengthy xlink:href="#p" y="10" />
    <use class="stripe" data-lengthy xlink:href="#p" y="12" />
    <use class="stripe" data-lengthy xlink:href="#p" y="14" />
    <use class="stripe" data-lengthy xlink:href="#p" y="16" />
    <use class="stripe" data-lengthy xlink:href="#p" y="18" />
    <use class="stripe" data-lengthy xlink:href="#p" y="20" />
    <use class="stripe" data-lengthy xlink:href="#p" y="22" />
  </g>
  
  <use xlink:href="#t"  data-lengthy class="triangle triangle--front" points="25,4 40,30 10,30"/>
</svg>
<a class="repo" target="_top" href="https://github.com/shshaw/lengthy-svg">Lengthy now available on GitHub</a>

:root {
  --path-length: 1;
}


.lengthy {
  stroke-dasharray: var(--path-length) var(--path-length);
}


@keyframes stroke-move {
  0%, 10% { 
    stroke-dashoffset: calc(1 * var(--path-length));
  }
  90%, 100% { 
    stroke-dashoffset: calc(-1 * var(--path-length));
  }
}

/** 
 * Webkit does not support animating the stroke-dashoffset value _without_ a unit, 
 * so we have to deliver a separate keyframe list via -webkit-animation-name
 */
@keyframes webkit-stroke-move {
  0%, 10% { 
    stroke-dashoffset: calc(1px * var(--path-length));
  }
  90%, 100% { 
    stroke-dashoffset: calc(-1px * var(--path-length));
  }
}



.stripe {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.2;

  @for $i from 1 through 8 {
    &:nth-child(#{$i}) { 
      stroke: hsl( (300 * (($i - 1) / 7) ), 90%, 70% );
      animation-delay: 0.25s * $i;
    }
  }
}

@supports (--var: 0) {
  .stripe.lengthy {
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(.5,0,.5,1), cubic-bezier(.9,.4,0,1), linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    /* Unfortunately, Chrome/Blink has a glitch with the CSS var animation keyframes. Chrome incorrectly treats a unitless calc()'d var() animation as trying to animate just var(), therefore making the animation "discrete", snapping to each value instead of transitioning between the values */

    /* FF and Webkit/Blink all use unprefixed `animation-name`, so to target webkit specifically, I then I have to override back for -moz

    /* What all browsers _should_ use */
    animation-name: stroke-move, stroke-color, stroke-fade;  
    /* Override keyframes to fix a webkit glitch */
    -webkit-animation-name: webkit-stroke-move, stroke-color, stroke-fade;
    /* Override yet again back to the original keyframes since Firefox obeys -webkit properties */
    -moz-animation-name: stroke-move, stroke-color, stroke-fade;

    animation-fill-mode: both;
  }
}

@keyframes stroke-fade {
  0%, 10%, 90%, 100% { opacity: 0; }
  40%, 60% { opacity: 1; }
}
@keyframes stroke-color { 0% { stroke: #FFF; } }

.triangle--front {
  fill: none;
  stroke: #FFF; 
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.triangle--front.lengthy {
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(.9,.1,.1,.9), ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-name: stroke-move, stroke-fade;
  -webkit-animation-name: webkit-stroke-move, stroke-fade;
  -moz-animation-name: stroke-move, stroke-fade;
  animation-fill-mode: both;
}

@keyframes stroke-fade {
  0%, 100% { stroke-opacity: 0; }
  20%, 80% { stroke-opacity: 1; }
}


.L { 
  fill: none;
  stroke: #FFF;
  stroke-width: 3;
}

html, body { background: #222; color: #EEE;}
html { font-family: monospace; font-size: 10px; text-align: center; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

svg {  
  // position: absolute;
  // top: 0; right: 0; bottom: 0; left: 0;
  // margin: auto; 
  max-width: 100%;
  max-height: 100%;
}

html { height: 100%; display: flex; }
body { width: 100%; margin: auto; }

console.clear();

Lengthy('[data-lengthy]');