SVG Animation - Decepticon Logo

Decepticon-Logo.markdown

Decepticon Logo

Took the SVG logo from my Transformers Palette Swap pen (http://codepen.io/digsite_/pen/mIJKa) and made a SVG animation out of the pieces.

A Pen by Jeremy Paris on CodePen.

License.

index.html

<div class="ctnr">

  <!-- SVG Logo found here: http://seeklogo.com/decepticon-g1-logo-229304.html -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="decepticon_logo" x="0px" y="0px" viewBox="0 0 309 309" enable-background="new 0 0 309 309" xml:space="preserve">
  <g class="crest">
    <polygon class="bg" points="155.2,192 193.5,143.5 215,14 172,63.5 138.5,63.5 91.5,14 116.5,143.5"/>
    <polygon class="chevron" points="154.5,143.5 172,99.5 138.5,99.5"/>
  </g>
  <polygon class="bg head" points="0,0 43.5,59.5 96.5,77.5 103.5,112.5 51.8,100.5 51.8,105 103.5,123 108,149.5 54,135 56.5,140.5 118.5,160.5 153.5,202 188.5,160.5 252,143.5 252,138.5 201,152 203.5,125 256,109 256,104 203.5,116 211.5,80 264,62 309,3 292.5,138.5 154.5,301 15,136"/>
  <polygon class="bg left cheek" points="39,277 25,168 143,309"/>
  <polygon class="bg right cheek" points="166,309 269,278.5 284,168"/>
  <polygon class="eyes left" points="129,243.5 138.5,211.5 86.5,188.5"/>
  <polygon class="eyes right" points="182.5,243.5 225,188.5 172,210.5"/>
  </svg>
  
</div>

script.js

/*
Transformers is owned and copyrighted by Hasbro, Inc.
Imagery used for fun and learning.
*/

style.scss

@import "compass/css3";
//=== VARIABLES ===
$c-purple: #8712B6;
$c-bg: darken($c-purple, 75);
$c-bright: tint($c-purple, 66);

//=== KEYFRAMES ===
@include keyframes(left-cheek){
  from {  @include transform(translate(9999px, 9999px));  }
  to {  @include transform(translate(0, 0));  }
}
@include keyframes(right-cheek){
  from {  @include transform(translate(-9999px, 9999px));  }
  to {  @include transform(translate(0, 0));  }
}
@include keyframes(drop-head){
  from {  @include transform(translate(0, -9999px));  }
  to {  @include transform(translate(0, 0));  }
}
@include keyframes(drop-crest){
  from {  @include transform(translate(-1px, -9999px));  }
  to {  @include transform(translate(-1px, 0));  }
}
@include keyframes(flicker-eyes){  
  0% {  @include opacity(0);  }
  25% {  @include opacity(1);  }
  30%,35%,40%{  fill: $c-bright;  }  
  33%,38%{  fill: $c-bg;  }
  100% {  @include opacity(0); fill: $c-bg;  }
}
@include keyframes(fade-in-eyes){    
  0% {  @include opacity(0); fill: $c-bg;  }
  100% {  @include opacity(1);  }
}

//=== LAYOUT STYLES ===
html, body, .ctnr{
  width: 100%;
  height: 100%;
}
body{
  background: $c-bg;
}

//=== SVG STYLES ===
#decepticon_logo{
  display: block;
  width: 50%;
  height: 50%;
  margin: 3em auto;
  overflow: visible;  

  .chevron {  fill: $c-bg;  }
  .bg {  fill: $c-purple;  }
  .eyes {
    @include opacity(0);
    @include animation(flicker-eyes 1.5s ease-in-out forwards, fade-in-eyes 0.5s 3.25s ease-in-out forwards);
  }
  .crest {
    @include animation(drop-crest 3.5s ease-in-out forwards);
  }
  .head {
    @include animation(drop-head 3s ease-in-out forwards);
  }
  .cheek.left {
    @include animation(left-cheek 2s ease-in-out forwards);
  }
  .cheek.right {
    @include animation(right-cheek 2s ease-in-out forwards);
  }  
}