body {
  text-align: center;
}

.logo {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 0.8em;
  display: inline-block;
  position: relative;
}

.logo-svg {
  width: em(228);
  height: em(250);
  position: relative;

  polygon {
    stroke: #ccc;
    stroke-width: 1;
  }

  g {
    @include transform(translateX(em-calc(0)));
    @include transition(transform .1s ease);
  }
}

.logo-svg {
  &-green-1  {fill: #3fae52}
  &-green-2  {fill: #7cc686}
  &-green-3  {fill: #2d8d43}
  &-cyan-1   {fill: #00bad2}
  &-cyan-2   {fill: #0097a7}
  &-cyan-3   {fill: #4ac4d7}
  &-cyan-4   {fill: #00bad2}
  &-blue-1   {fill: #62b3e4}
  &-blue-2   {fill: #1b77bd}
  &-blue-3   {fill: #62b3e4}
  &-blue-4   {fill: #3191cf}
  &-purple-1 {fill: #7a3594}
  &-purple-2 {fill: #944198}
  &-purple-3 {fill: #b06eae}
  &-purple-4 {fill: #944198}
  &-pink-1   {fill: #e81f64}
  &-pink-2   {fill: #c21e5c}
  &-pink-3   {fill: #f06392}
  &-pink-4   {fill: #e81f64}
  &-pink-5   {fill: #c21e5c}
  &-red-1    {fill: #ef4438}
  &-red-2    {fill: #e57373}
  &-red-3    {fill: #d32e2e}
  &-red-4    {fill: #ef4438}
  &-red-5    {fill: #d32e2e}
  &-orange-1 {fill: #f47c20}
  &-orange-2 {fill: #f8951f}
  &-orange-3 {fill: #f47c20}
  &-orange-4 {fill: #fcb452}
  &-yellow-1 {fill: #fedc63}
  &-yellow-2 {fill: #fecd27}
  &-yellow-3 {fill: #faa71c}
}

@mixin lst($transform-rotate, $transform-x, $transform-y) {
  @include transform(rotate($transform-rotate) translate3d(em($transform-x), em($transform-y), 0));
}
.logo:hover {
  .logo-svg {
    &-green-1 {@include lst(-15deg, 30, 0)}
    &-green-2 {@include lst(-10deg, -10, -30)}
    &-green-3 {@include lst(14deg, 20, -110)}
    &-cyan-1  {@include lst(-7deg, -85, -50)}
    &-cyan-2  {@include lst(22deg, 70, -180)}
    &-cyan-3  {@include lst(12deg, -20, -80)}
    &-cyan-4  {@include lst(-25deg, 0, 80)}
    &-blue-1  {@include lst(7deg, -35, -60)}
    &-blue-2 {@include lst(13deg, 100, -150)}
    &-blue-3 {@include lst(2deg, 50, -50)}
    &-blue-4 {@include lst(-10deg, 50, 60)}
    &-purple-1 {@include lst(5deg, -80, -150)}
    &-purple-2 {@include lst(8deg, -20, -120)}
    &-purple-3 {@include lst(-30deg, -80, 120)}
    &-purple-4 {@include lst(20deg, 150, -80)}
    &-pink-1 {@include lst(10deg, 40, -120)}
    &-pink-2 {@include lst(-30deg, -120, 0)}
    &-pink-3 {@include lst(11deg, 90, 0)}
    &-pink-4 {@include lst(-60deg, -350, -10)}
    &-pink-5 {@include lst(-22deg, -120, 90)}
    &-red-1 {@include lst(5deg, 50, -30)}
    &-red-2 {@include lst(-20deg, -95, 15)}
    &-red-3 {@include lst(17deg, 80, 0)}
    &-red-4 {@include lst(9deg, 50, 20)}
    &-red-5 {@include lst(-12deg, -70, 50)}
    &-orange-1 {@include lst(8deg, 70, -35)}
    &-orange-2 {@include lst(-23deg, -100, 0)}
    &-orange-3 {@include lst(15deg, 10, 18)}
    &-orange-4 {@include lst(10deg, 40, 28)}
    &-yellow-1 {@include lst(20deg, 50, 0)}
    &-yellow-2 {@include lst(-14deg, -80, -17)}
    &-yellow-3 {@include lst(-5deg, -15, -20)}
  }
}