<div>
  <svg id="app-icon-svg" class="app-icon app-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="280px" height="256px" viewBox="0 0 382.162 382.162" style="enable-background:new 0 0 382.162 382.162;"
    xml:space="preserve">
						<path d="M55.819,138.797c3.809-4.957,7.986-9.691,12.495-14.173C59.153,118.867,53,108.734,53,97.132   c0-17.939,14.596-32.535,32.534-32.535c16.039,0,29.313,11.682,31.977,26.966c5.73-2.5,11.633-4.744,17.732-6.652   c-5.505-22.359-25.669-39.019-49.709-39.019c-28.25,0-51.24,22.989-51.24,51.24C34.294,114.309,42.819,129.499,55.819,138.797z" fill="#d9008d"/>
						<path d="M297.535,64.597c17.944,0,32.534,14.596,32.534,32.535c0,11.834-6.418,22.115-15.893,27.809   c4.518,4.521,8.683,9.292,12.494,14.292c13.336-9.258,22.104-24.667,22.104-42.094c0-28.257-22.987-51.24-51.24-51.24   c-24.132,0-44.372,16.791-49.779,39.299c6.113,1.946,12.038,4.217,17.774,6.753C268.033,76.474,281.374,64.597,297.535,64.597z" fill="#d9008d"/>
						<path d="M11.505,213.173c0,86.782,80.666,157.392,179.818,157.392c99.147,0,179.811-70.609,179.811-157.392   c0-19.827-4.153-39.104-12.355-57.399c14.937-15.829,23.383-36.831,23.383-58.642c0-47.164-38.368-85.535-85.535-85.535   c-32.309,0-61.378,17.933-75.98,46.278c-19.497-2.801-39.573-2.789-59.107,0.073c-14.593-28.387-43.668-46.351-76.017-46.351   C38.371,11.597,0,49.968,0,97.132c0,21.991,8.567,43.123,23.705,58.985C15.606,174.312,11.505,193.475,11.505,213.173z    M18.706,97.132c0-36.852,29.98-66.829,66.829-66.829c27.249,0,51.523,16.316,61.851,41.571l2.868,7.021l7.468-1.367   c21.948-4.021,44.907-4.034,66.773-0.085l7.441,1.34l2.868-6.997c10.345-25.203,34.61-41.491,61.822-41.491   c36.852,0,66.829,29.98,66.829,66.832c0,18.867-8.117,36.97-22.244,49.669l-5.327,4.783l3.232,6.391   c5.529,10.952,9.354,22.329,11.448,33.996c1.339,7.143,2.07,14.462,2.07,21.927c0,38.052-18.183,72.486-47.544,97.378   c-29.168,25.051-69.398,40.566-113.768,40.566c-31.17,0-60.282-7.679-84.968-20.923c-46.092-24.21-76.821-67.553-76.821-117.021   c0-20.009,5.069-39.004,14.112-56.157l2.968-5.907l-5.376-4.771C26.917,134.352,18.706,116.157,18.706,97.132z" fill="#d9008d"/>
						<path d="M75.459,258.598c0,43.951,51.853,79.719,115.597,79.719c63.738,0,115.594-35.768,115.594-79.719   c0-43.964-51.855-79.729-115.6-79.729C127.312,178.869,75.459,214.634,75.459,258.598z M191.05,249.244   c-14.636,0-25.982-6.99-25.982-12.994s11.347-12.981,25.982-12.981c14.629,0,25.979,6.978,25.979,12.981   S205.679,249.244,191.05,249.244z M191.05,197.572c53.423,0,96.894,27.377,96.894,61.025c0,31.651-38.489,57.737-87.538,60.715   v-52.038c20.417-2.978,35.33-15.533,35.33-31.024c0-17.768-19.626-31.688-44.686-31.688c-25.06,0-44.688,13.92-44.688,31.688   c0,15.491,14.916,28.047,35.335,31.024v52.038c-49.048-2.978-87.538-29.063-87.538-60.715   C94.166,224.949,137.624,197.572,191.05,197.572z" fill="#d9008d"/>
						<path d="M122.462,157.271c-16.082,0-16.082,24.941,0,24.941S138.549,157.271,122.462,157.271z" fill="#d9008d"/>
						<path d="M259.641,182.212c16.075,0,16.075-24.941,0-24.941C243.554,157.271,243.554,182.212,259.641,182.212z" fill="#d9008d"/>
					</svg>


</div>
$icon-fill-color: #f0f0f0;
$icon-stroke-color: #d9008d;

#app-icon-svg {
  width: 100%;
  max-height: 100%;
  text-align: center;
  margin: 0 auto;
}

#app-icon-svg * {
  fill: $icon-fill-color;
  stroke: $icon-stroke-color;
  stroke-width: 13;
}
View Compiled
var animationVector = 1;
var vivus = new Vivus('app-icon-svg', {}, function() {
  $('#app-icon-svg').removeClass('app-icon-svg');
});
setInterval(function() {
  if (vivus.getStatus() == 'start') {
    $('#app-icon-svg').addClass('app-icon-svg');
    vivus.reset().play(animationVector = 1);
  } else if (vivus.getStatus() == 'end') {
    $('#app-icon-svg').addClass('app-icon-svg');
    vivus.stop().play(animationVector = -1);
  }
}, 100);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
  2. https://cdn.jsdelivr.net/vivus/0.3.1/vivus.min.js