SVG Image :
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;
}
}