<div id="icon-doctor-illo" class="animate" style="background-image: none;"><!--?xml version="1.0" encoding="UTF-8" standalone="no"?--><svg width="331px" height="265px" viewBox="0 0 331 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">        <title>doctor-illo</title>    <desc>Created with Sketch.</desc>    <defs></defs>    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <g id="homepage" transform="translate(-238.000000, -1529.000000)" stroke="#5AC5CC">            <g id="2-—-doctor-search" transform="translate(0.000000, 1263.000000)">                <g id="doctor-illo" transform="translate(241.000000, 269.000000)">                    <g id="g11" transform="translate(101.000000, 0.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0.161306413,42.1187346 C0.161306413,42.1187346 -1.21511876,10.2996182 35.814038,10.2996182" id="Stroke-13"></path>                        <path d="M116.140529,42.1187346 C116.140529,42.1187346 117.516954,10.2996182 80.4877969,10.2996182" id="Stroke-15"></path>                        <path d="M35.8143468,10.2997728 L56.772601,10.2997728 C56.772601,10.2997728 69.230677,9.90083552 75.431924,0.386644478 C75.431924,0.386644478 72.6088242,10.2997728 76.6192162,10.2997728 L79.5843587,10.2997728" id="Stroke-33"></path>                    </g>                    <g id="g10" transform="translate(127.000000, 62.000000)" stroke-width="5">                        <path d="M61.2456354,0.424280149 C58.4178765,0.424280149 56.1255572,2.72005231 56.1255572,5.55207075 C56.1255572,8.38408918 58.4178765,10.6798613 61.2456354,10.6798613 C64.0733943,10.6798613 66.3657135,8.38408918 66.3657135,5.55207075 C66.3657135,2.72005231 64.0733943,0.424280149 61.2456354,0.424280149" id="Fill-31"></path>                        <path d="M5.12007815,0 C2.29231921,0 0,2.29577217 0,5.1277906 C0,7.95980903 2.29231921,10.2555812 5.12007815,10.2555812 C7.94783709,10.2555812 10.2401563,7.95980903 10.2401563,5.1277906 C10.2401563,2.29577217 7.94783709,0 5.12007815,0" id="Fill-31-Copy"></path>                    </g>                    <g id="g9" transform="translate(87.000000, 70.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M130.147167,0.749908955 C130.147167,0.749908955 144.000968,-3.65618358 144.000968,10.4001716 C144.000968,24.4565269 130.317773,30.4413597 130.317773,30.4413597" id="Stroke-19"></path>                        <path d="M14.1613064,0.749908955 C14.1613064,0.749908955 0.307505938,-3.65618358 0.307505938,10.4001716 C0.307505938,24.4565269 13.9907007,30.4413597 13.9907007,30.4413597" id="Stroke-21"></path>                    </g>                    <g id="g8" transform="translate(101.000000, 31.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0.161306413,32.6990785 L11.3765083,21.3285919 L11.3765083,8.25798299 C11.3765083,8.25798299 37.1202138,0.493394925 58.0676603,0.493394925 C79.0151069,0.493394925 104.230784,8.25798299 104.230784,8.25798299" id="Stroke-25"></path>                        <polyline id="Stroke-27" points="116.12864 32.6990785 104.231015 21.3285919 104.231015 8.25798299"></polyline>                    </g>                    <g id="g7" transform="translate(127.000000, 119.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0.126644893,0.175177612 C5.39303444,8.83118955 17.7569299,14.9072522 32.1688658,14.9072522 C46.3993884,14.9072522 58.6328207,8.98272388 64.0088302,0.500667164" id="mouth"></path>                    </g>                    <g id="g6" transform="translate(149.000000, 68.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M15.9453741,0.5832 L15.9453741,25.0660448 C15.9453741,36.2579373 0.60861639,36.3074179 0.60861639,25.0660448" id="nose"></path>                    </g>                    <g id="g5" transform="translate(101.000000, 42.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M116.147167,0.118734627 L116.147167,53.9250182 C116.147167,86.0023615 90.1826781,112.005961 58.1543527,112.005961 C26.1252553,112.005961 0.161538005,86.0023615 0.161538005,53.9250182 L0.161538005,0.118734627" id="jaw-line"></path>                    </g>                    <g id="g4" transform="translate(129.000000, 146.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0,28.5530113 L0,0.978402388" id="Stroke-7"></path>                        <path d="M59,28.6099913 L59,1.03538239" id="Stroke-11"></path>                    </g>                    <g id="g3" transform="translate(92.000000, 175.000000)" stroke-width="6">                        <path d="M22,16.1761725 L22,1.5159994" id="Stroke-35" stroke-linecap="round" stroke-linejoin="round"></path>                        <path d="M11.8293943,68.1793522 L0.0251781473,68.1793522 L0.0251781473,39.5849791 C0.0251781473,26.9156269 10.2800475,16.6445373 22.9303444,16.6445373 L22.9303444,16.6445373 C35.5806413,16.6445373 45.8355107,26.9156269 45.8355107,39.5849791 L45.8355107,68.1793522 L34.0305226,68.1793522" id="Stroke-37" stroke-linecap="round" stroke-linejoin="round"></path>                        <path d="M32.5702732,64.8391562 C30.7281722,64.8391562 29.235101,66.3344765 29.235101,68.1793522 C29.235101,70.024228 30.7281722,71.5195483 32.5702732,71.5195483 C34.4123741,71.5195483 35.9054454,70.024228 35.9054454,68.1793522 C35.9054454,66.3344765 34.4123741,64.8391562 32.5702732,64.8391562 M32.5702732,67.7314586 C32.8169868,67.7314586 33.0174932,67.932267 33.0174932,68.1793522 C33.0174932,68.4264375 32.8169868,68.6272459 32.5702732,68.6272459 C32.3235595,68.6272459 32.1230531,68.4264375 32.1230531,68.1793522 C32.1230531,67.932267 32.3235595,67.7314586 32.5702732,67.7314586" id="stroke-39-copy"></path>                        <path d="M12.3351722,65 C10.4930713,65 9,66.4953203 9,68.340196 C9,70.1850717 10.4930713,71.6803921 12.3351722,71.6803921 C14.1772731,71.6803921 15.6703444,70.1850717 15.6703444,68.340196 C15.6703444,66.4953203 14.1772731,65 12.3351722,65 M12.3351722,67.8923023 C12.5818858,67.8923023 12.7823922,68.0931108 12.7823922,68.340196 C12.7823922,68.5872813 12.5818858,68.7880897 12.3351722,68.7880897 C12.0884586,68.7880897 11.8879522,68.5872813 11.8879522,68.340196 C11.8879522,68.0931108 12.0884586,67.8923023 12.3351722,67.8923023" id="stroke-39"></path>                        <path d="M109,38.7612818 L109,0.83285791" id="Stroke-43" stroke-linecap="round" stroke-linejoin="round"></path>                        <path d="M119.566508,49.0128884 C119.566508,54.674551 114.983314,59.2646496 109.330166,59.2646496 C103.677019,59.2646496 99.0938242,54.674551 99.0938242,49.0128884 C99.0938242,43.3512257 103.677019,38.7611272 109.330166,38.7611272 C114.983314,38.7611272 119.566508,43.3512257 119.566508,49.0128884 L119.566508,49.0128884 Z" id="Stroke-45" stroke-linecap="round" stroke-linejoin="round"></path>                    </g>                    <g id="g2" transform="translate(53.000000, 174.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0.953165083,83.733606 C0.953165083,83.733606 6.86878266,0.552856716 77.4099941,0.552856716 L106.154353,30.0649403 L134.898711,0.552856716 C210.981134,0.552856716 212.037963,83.733606 212.037963,83.733606" id="shoulders/collar"></path>                    </g>                    <g id="g1" transform="translate(0.000000, 259.000000)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">                        <path d="M0.385985748,0 L324.871081,0" id="Stroke-47"></path>                    </g>                </g>            </g>        </g>    </g></svg></div>

<span class="instructions">click to restart</span>
$anim-speed: 3.8s;
$anim-base-delay: .3s;

body { 
  background: #005568;
}

.instructions {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  font-size: 12px;
  letter-spacing: .01em;
  color: #00313B;
  text-align: center;
}

#icon-doctor-illo {
  margin-top: 120px;
  max-width: 100%;
  height: auto;
  text-align: center;
}

#icon-doctor-illo #doctor-illo #4 {
  stroke-width: 5;
}
#icon-doctor-illo #doctor-illo > g{
  fill: none;
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  stroke-width: 6;
}
.animate#icon-doctor-illo #doctor-illo > g{
  animation-name: strokeanim;
}
#doctor-illo #g1{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-duration: $anim-speed;

}
#doctor-illo #g2{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 1.05);
  animation-duration: ($anim-speed - 0.5);
}
#doctor-illo #g3{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 1.25);
  animation-duration: ($anim-speed);
}
#doctor-illo #g4{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 1.45);
  animation-duration: ($anim-speed);
}
#doctor-illo #g5{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 1.65);
  animation-duration: ($anim-speed - 0.4);
}
#doctor-illo #g6{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 1.85);
  animation-duration: ($anim-speed);
}
#doctor-illo #g7{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 2.05);
  animation-duration: ($anim-speed);
}
#doctor-illo #g8{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 2.25);
  animation-duration: ($anim-speed);
}
#doctor-illo #g9{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 2.45);
  animation-duration: ($anim-speed);
}
#doctor-illo #g10{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 2.65);
  animation-duration: ($anim-speed);
}
#doctor-illo #g11{
  animation-fill-mode: forwards;
  animation-direction: linear;
  animation-delay: ($anim-base-delay * 2.85);
  animation-duration: ($anim-speed);
}

@keyframes strokeanim {
  from {
    stroke-dashoffset: 500px;
  }
  to {
    stroke-dashoffset: 0;
  }
}
View Compiled
//js from: https://codepen.io/chriscoyier/pen/EyRroJ
"use strict";

// retrieve the element
var element = document.getElementById("icon-doctor-illo");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("animate");

  void element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("animate");
}, false);
Rerun