<div id="container">
  <svg id="logo" viewBox="0.9 21.1 98.5 57.2"><path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M31.4 47.7h-4.2l-6.6 6.2v-1.4l0.5 0.1 0.2-1.2 -0.7-0.2V36.4c1.5-0.9 2.6-2.3 3-4 0.3-1.7 0-3.4-0.9-4.8 -0.7-1.2-1.8-2-3.1-2.5l0.5-2.5c0.1-0.5-0.2-0.9-0.6-1 -0.4-0.1-0.9 0.2-1 0.7L18 24.7c-0.2 0-0.4 0-0.6 0 -3 0-5.6 2.1-6.2 5 -0.4 1.8 0.1 3.7 1.1 5.1l-6 13.4L5.4 48l-0.2 1.2 0.7 0.1 -4.3 9.8 0.7 2 2-0.9L8.8 50l3.9 0.8 -0.1 0.3c0 0.3 0.1 0.5 0.4 0.6 0.3 0 0.5-0.1 0.6-0.4l0.1-0.3 3.9 0.8v11.3l1.4 1.6 1.6-1.6v-5.3l2.6-2.5 5.7 7.8h3.6l-7.1-9.8L31.4 47.7zM17.5 50.6l-3.6-0.8 0.1-0.2c0-0.3-0.1-0.5-0.4-0.6 -0.3 0-0.5 0.1-0.6 0.4l-0.1 0.2 -3.7-0.8 5.4-12.1c0.4 0.2 0.9 0.4 1.4 0.5 0.4 0.1 0.9 0.1 1.3 0.1 0.1 0 0.1 0 0.2 0V50.6zM20.5 32.4h-2.8 -0.1v3.8c-0.1 0-0.1 0-0.2 0 -0.4 0-0.7 0-1.1-0.1 -0.4-0.1-0.8-0.2-1.2-0.4l1.6-3.5L14 31l-1.1 2.6c-0.6-1.1-0.9-2.3-0.6-3.6 0.5-2.4 2.6-4.1 5-4.1 0.4 0 0.8 0 1.2 0.1 1.3 0.3 2.5 1 3.2 2.2s1 2.6 0.7 3.9c-0.3 1.2-0.9 2.2-1.8 3L20.5 32.4 20.5 32.4z"/><path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M39.4 47.4c-2.1 0-4.2 0.8-5.7 2.3 -1.6 1.5-2.4 3.5-2.4 5.7 0 2.1 0.9 4.2 2.4 5.7 1.5 1.6 3.5 2.4 5.7 2.4 2.2 0 4.2-0.9 5.7-2.4 1.6-1.5 2.4-3.5 2.4-5.7 0-2.1-0.9-4.1-2.4-5.7C43.6 48.2 41.6 47.4 39.4 47.4zM39.4 60.6c-2.9 0-5.2-2.3-5.2-5.2 0-2.8 2.3-5.1 5.2-5.1 2.9 0 5.2 2.2 5.2 5.1C44.6 58.3 42.2 60.6 39.4 60.6z"/><path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M56.3 47.4c-1.6 0-3.2 0.8-4.5 1.8v-1.5h-2.9v15.5h2.9v-8.3c0-2.5 2-4.6 4.5-4.6s4.5 2.1 4.5 4.6v8.3h2.9v-8.3c0-2.1-0.7-3.9-2.1-5.3C60.2 48.1 58.3 47.4 56.3 47.4z"/><path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M73.4 47.4c-1.9 0-3.8 0.9-5.2 2.1v-1.8h-2.9v30.2h2.9V61.3c1.5 1.2 3.3 2.1 5.2 2.1 2.2 0 4.2-0.8 5.7-2.3 1.6-1.5 2.4-3.5 2.4-5.7 0-2.1-0.9-4.1-2.4-5.7C77.6 48.2 75.6 47.4 73.4 47.4zM73.4 60.6c-2.9 0-5.2-2.3-5.2-5.2 0-2.8 2.3-5.2 5.2-5.2 2.9 0 5.2 2.3 5.2 5.2C78.6 58.3 76.2 60.6 73.4 60.6z"/><path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M96.1 47.7v1.8c-1.5-1.2-3.3-2.1-5.2-2.1 -2.1 0-4.2 0.8-5.7 2.3 -1.6 1.5-2.4 3.5-2.4 5.7 0 2.1 0.9 4.2 2.4 5.7s3.5 2.3 5.7 2.3c1.9 0 3.8-0.9 5.2-2.1v1.8H99V47.7H96.1zM90.9 60.6c-2.9 0-5.2-2.3-5.2-5.2 0-2.8 2.3-5.2 5.2-5.2 2.9 0 5.2 2.3 5.2 5.2C96.1 58.3 93.8 60.6 90.9 60.6z"/></svg>
</div>

@import "bourbon";

$green1: #9ED5BC;
$green2: #5DA3A6;
$white: rgba(230,230,230,.8);

body {
  margin-top: 2em;
  text-align: center;
  background: $green2;
}

#logo {
  max-width: 300px;
  
  path {
    stroke: darken($green2, 10%);
    stroke-width: 0.8px;
    fill: $green2;
    @include transition(fill .3s, stroke-width .3s);
  }
}

.white path {
  stroke-width: 0px !important;
  fill: $white !important;
}

new Vivus('logo', {type: 'async', duration: 200}, function(){
  document.getElementById("container").className = "white";
});