Edit on
<div class="content">
  <div class="ic-logo-wrap">
    <svg class="ic-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 67.6 77.3" enable-background="new 0 0 67.6 77.3" xml:space="preserve">
      <g>
      <path class="logo-chicklet" fill="#759ed0" d="M57.6,0H10C4.5,0,0,4.5,0,10v47.6c0,5.5,4.5,10,10,10h38.2v0l9.7,0l9.7,9.7V10C67.6,4.5,63.1,0,57.6,0z"/>
      <rect class="logo-i" x="16.2" y="19.6" fill="#FFFFFF" width="3" height="28.5"/>
      <path class="logo-c" fill="#FFFFFF" d="M40.9,45.7c4.1,0,7.8-2.1,9.9-5.3l2.6,1.7c-2.7,4-7.3,6.7-12.5,6.7c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15
        c5.2,0,9.8,2.7,12.5,6.7l-2.6,1.7c-2.1-3.2-5.8-5.3-9.9-5.3c-6.6,0-11.9,5.3-11.9,11.9S34.4,45.7,40.9,45.7z"/>

      <ellipse class="anim-fade" fill="#4C001F" cx="12.8" cy="32.7" rx="3.2" ry="3.2"/>
      <ellipse class="anim-fade" fill="#4C001F" cx="54.6" cy="32.7" rx="3.2" ry="3.2"/>
      <g>
        <polygon class="anim-fade" fill="#4C001F" points="58,46.6 56,49 11.7,49 9.7,46.6 		"/>
        <polygon class="anim-fade" fill="#4C001F" points="22.7,46.7 16.1,54.1 9.7,46.6 		"/>
        <polygon class="anim-fade" fill="#4C001F" points="56.2,48.8 51.8,54.1 47.3,48.8 		"/>
      </g>
      <polygon class="vamp-right-eyebrow anim-hide" fill="#FFFFFF" points="54.8,15 58.2,18.4 47.9,28.6 44.4,25.2 	"/>
      <polygon class="vamp-left-eyebrow anim-hide" fill="#ffffff" points="10,18.4 13.5,15 23.9,25.2 20.4,28.6 	"/>
    </g>
    </svg>
  </div>
  <h1 class="copy anim-fade">Happy<br>Halloween</h1>
</div>
html
  height 100%

body
  background #ffffff
  font-family 'Creepster', cursive
  text-align center
  position relative
  height 100%

.content
  position absolute
  width 100%
  top 50%
  transform translateY(-50%)
  
.ic-logo-wrap
  width 100px
  margin 0 auto
  cursor pointer
  display inline-block
  vertical-align middle

.anim-hide
  visibility hidden

.anim-fade
  opacity 0

.copy
  font-size 3em
  display inline-block
  vertical-align middle
  position relative
  top -10px
  text-align center
  color #D22D78
  line-height 1

@media screen and (min-width: 310px)
  .copy
    text-align left
  
@media screen and (min-width: 640px)
  .ic-logo-wrap
    width 200px
  .copy 
    font-size 6em
    top -10px
    padding-left 50px
  

@media screen and (min-width: 1260px)
  .ic-logo-wrap
    width 400px
  .copy 
    font-size 12em
    top -20px
View Compiled
var mainSVG = document.querySelector('.ic-logo');

var faceTl = new TimelineMax({paused:true});

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

faceTl.to('.logo-i', 0.75, {
  morphSVG:{shape:'.vamp-left-eyebrow'},
  ease:Elastic.easeInOut
})
.to('.logo-c', 0.75, {
  morphSVG:{shape:'.vamp-right-eyebrow'},
  ease:Elastic.easeInOut
}, '-=0.75')
.to('.anim-fade', 0.5, {
    opacity: 1,
    ease:Power2.easeInOut
}, '-=0.5')
.to('.logo-chicklet', 0.75, {
  fill: '#D22D78'
}, '-=0.75')
.to(document.body, 0.75, {
  backgroundColor:'#000000',
  ease:Power2.easeInOut
}, '-=0.75');


mainSVG.addEventListener('click', function() {
  if (faceTl.time() > 0) {
    faceTl.reverse();
  } else {
    faceTl.play(0);
  }
});
Rerun