SCSS

by dsummersl

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Layer_1"
   x="0px"
   y="0px"
   viewBox="0 0 738 303"
   xml:space="preserve"
   sodipodi:docname="alex_hays_signature-2.svg"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
     id="metadata937"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
     id="defs935" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1286"
     inkscape:window-height="1126"
     id="namedview933"
     showgrid="false"
     inkscape:zoom="1.3753387"
     inkscape:cx="331.35371"
     inkscape:cy="135.71063"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="0"
     inkscape:current-layer="Layer_1" /><defs
     id="defs1633"><clipPath
       id="clip-hayes-s-1"><path
         d="m 642.45,137.41 c -1.37,0.36 -2.31,0.72 -3.28,0.84 -7.47,0.89 -13.76,4.2 -19.52,8.93 -3.42,2.81 -5.92,6.21 -8.07,9.97 -0.27,0.48 -0.45,1.01 -0.72,1.64 1.55,0.9 3.23,0.82 4.85,1.02 3.96,0.5 7.92,0.97 11.87,1.5 0.86,0.12 1.82,0.27 2.51,0.74 1.71,1.17 3.25,0.83 5.03,0.12 5.01,-1.99 10.17,-2.67 15.6,-1.84 4.28,0.65 8.4,1.53 12.12,3.81 0.5,0.31 1.13,0.74 1.26,1.23 0.34,1.26 1.1,2.03 2.13,2.73 0.85,0.58 1.65,1.28 2.32,2.07 0.47,0.54 0.67,1.31 0.97,1.93 -1.18,1.12 -2.21,0.89...

SCSS

$ms-per-stroke: 1.5;
$total-delay: 0;
$letters: (
  alex-a-1: 150,
  alex-a-2: 150,
  alex-a-3: 100,
  alex-l-1: 300,
  alex-e-1: 200,
  alex-x-1: 75,
  alex-x-2: 150,
  hayes-h-1: 150,
  hayes-h-2: 200,
  hayes-h-3: 150,
  hayes-a-1: 130,
  hayes-a-2: 150,
  hayes-y-1: 150,
  hayes-y-2: 300,
  hayes-e-1: 225,
  hayes-s-1: 250,
);

@mixin dash($dash-length) {
  stroke-dasharray: $dash-length $dash-length;
  stroke-dashoffset: $dash-length;
  animation: draw-#{$dash-length} ease-in-out forwards;

  @keyframes draw-#{$dash-length} {
    from {
      stroke-dashoffset: $dash-length;
    }

    to {
      stroke-dashoffset: 0;
    }
  }
}

path {
  fill-opacity: 0.0;
  stroke: #087575;
  stroke-width: 30;
}

$total-delay: 0;
@each $id, $stroke in $letters {
  $duration: round($stroke * $ms-per-stroke);
  ##{$id} {
    @include dash($stroke);
    clip-path: url(#clip-#{$id});
    animation-delay: #{$total-delay}ms;
    animation-duration: #{$duration}ms;
  }
  $total-delay: $total-delay + $duration;
}