CSS SVG Anim: Multi stroke-dashoffset with General stroke-width over time

CSS SVG Anim: Multi stroke-dashoffset with General stroke-width over time.markdown

CSS SVG Anim: Multi stroke-dashoffset with General stroke-width over time

Playing with multiple animations. One with delay, one without.

A Pen by Jake Albaugh on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="877" height="240" viewBox="0 0 900 240">
  <path d="M10 116.3C30 104 61.5 83.5 73.9 58.8v59.3c-11.8 3-28.3-3.5-53.4-22.3 20.5 17.8 53.8 36.6 74 16.4 6.6-6.5 11.2-13.6 14.3-21 4.5-10.6 5.7-21.7 4.9-32.5 8.4 9.3 7.4 36.9 12.9 62.3 8.2-22.1 18.2-35.4 22.7-51.3 13.8 9.3 17.8 10 30.1 10 7.5-7.5 21.7-8.5 30.1-5.9-12.3-2.7-41.1 1.4-41.1 26s26 20.5 35.6 8.2c9.6-12.3 5.5-9.6 5.5-21.9 1.5 10.4.3 47.3-5.5 77.9-4.9 25.6-13 46.7-25.4 44.2-27.4-5.5-22.5-28.7 6.3-57.7 32.9-33.1 43.8-45.2 74-45.2"/>
  <path d="M360 60.1c-2.5 4.7-4.5 11.5-5.7 19.1-.7 4.6-1.1 9.4-1 14.1 0 4.7.5 9.3 1.4 13.4 1.8 8.1 5.6 14.4 11.8 16.5 4.2 1.4 9.6.9 16.3-2.4 3.2-1.6 6.8-3.8 10.6-6.7 7.6-5.8 14.1-10.8 19.7-15.1 2.8-2.2 5.3-4.2 7.7-6 7.4-6 12.7-10.4 16.6-14 7.4-6.8 10-10.7 12.6-15.8 0 8.2 1.2 15.7 2.7 22.4 1.2 5.2 2.6 9.9 3.8 14.1 3.5 12.4 5.1 19.8-6.5 20.4-15.7.8-26.1-3.5-34.3-9.5-5.5-3.9-10.1-8.6-14.7-13 11.6 12.9 38.6 37.7 75.5 13.3 4.5-3 9.2-6.7 14-11.3"/>"/>
  <path d="M633.5 79.1c-15.5-11.5-31.5-6-41 10-10.5 17.7 4 27.1 17 28 21.5 1.5 39.4-6.8 49.7-21s28-30.5 37.5-28.5c-14.5-3-46.1 28.7-29 47 13.5 14.5 41.9-16.4 51-35.5 7.6-15.8-10.2-28.5-21.5 7-10.1 31.7 25.8 16 38.3 7.5s23.5-26 38.5-26.5c-24.5 0-40.5 43.5-29.5 51s40.5-11.5 48-34-4.5-37.5-16-8S792 111.6 814 94.6s42.5-47.5 43.5-67.5-.5-40-16.5 0-24 71-10.5 86 33.5 10.5 42.5-3"/>
</svg>

style.scss

$distances: (1000, 500, 1100);
$max-dist: 1100;
body > svg {
  width: 600px;
  margin: 4rem auto 0;
  display: block;
  path {
    fill: none;
    stroke: #222;
    stroke-width: 2;
    stroke-linecap: round; 
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    animation-name: stroke-offset, stroke-width;
    animation-timing-function: ease-out, ease-out;
    animation-fill-mode: forwards, forwards;
  }
}

$delay: 0s;
$duration: 1s;
@for $p from 1 through 3 {
  path:nth-child(#{$p}) {
    $dist: nth($distances,$p);
    $dur: $dist / $max-dist * $duration;    
    animation-delay: $delay, 0s;
    animation-duration: $dur, $duration * 3;
    $delay: $delay + $dur;
    stroke-dasharray: $dist,$dist;
    stroke-dashoffset: $dist;
  }
}

@keyframes stroke-offset {
  to { stroke-dashoffset: 0; }
}

@keyframes stroke-width {
  to { stroke-width: 12; }
}


html,
body {
  height: 100%;
}  
body {
  background: linear-gradient(
    top left,
    cornSilk,
    darken(cornSilk,5%)
  );
  background-size: cover;
  background-repeat: no-repeat;
}