SVG image line art animation

Step 1 :

HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boom2 Svg Animation</title>
    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="svg-animations">
      <?php echo file_get_contents("icon_service_branding_and_communications.svg"); ?>
    </div>
  </body>
</html>

SVG Image :

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><style>.st0{fill:#CF4039;} .st1{fill:none;} .st2{fill:#262626;} .st3{fill:none;stroke:#CF4039;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;} .st4{fill:none;stroke:#231F20;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st5{fill:none;stroke:#231F20;stroke-width:5;stroke-miterlimit:10;} .st6{fill:none;stroke:#231F20;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;} .st7{fill:none;stroke:#CF4039;stroke-width:5;stroke-miterlimit:10;} .st8{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;} .st9{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;} .st10{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><path class="st3" d="M81.7 195.9l22.5 22.5M93 184.6l22.5 22.5M75.4 96.3l6.1-6.1M83.4 104.4l6.1-6.1M91.5 112.4l9.1-9.1M99.5 120.4l6.1-6.1M107.6 128.4l6.1-6.1M115.6 136.5l6.1-6.1"/><path class="st5" d="M121.2 142.3L66.1 88l22.5-22.5 55.1 54.3"/><path class="st6" d="M203 225.2l6.1-6.1M195 217.1l6.1-6M187 209.1l9.1-9.1M178.9 201.1l6.2-6.1M170.9 193l6.1-6.1M162.9 185l6.1-6.1"/><path class="st5" d="M179.7 157l54.2 55-22.5 22.5-54.2-54.9M213.1 109.5L95.5 227.1c-2.3 2.3-6.1 2.3-8.5 0l-14-14c-2.3-2.3-2.3-6.1 0-8.5L190.6 87l38.8-16.3-16.3 38.8z"/><path class="st5" d="M190.6 87l-1.1 15.8 9-1.2-.8 9.5 15.4-1.6M214.4 76v9.5h9.9"/></svg>

Note that Save the image as the name of above html mark up with svg extension(icon_service_branding_and_communications.svb).

Step 2 :

CSS :

.svg-animations {
  width: 300px;
  margin: 150px auto;
  background-color: #f3f3f3;
}
svg.st3 {
  fill: white;
}

svg {
  fill: lime;
}

svg>.st3, .st4, .st5, .st6, .st7 {
    stroke: #000;
    stroke-width: 5;
    stroke-dasharray: 460px;
    stroke-dashoffset: 460px;
    animation-name: draw;
    animation-duration: 5s;
    animation-fill-mode: forwards; // Stay on the last frame
    animation-iteration-count: 1; // Run only once
    animation-timing-function: linear;
  }

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