Dynamic SVGs Using <defs> Elements & JavaScript

left-nav.scss

@import "bourbon";

$steeler-fill1: rgba(#052838, 0.8);
$steeler-fill2: rgba(#95a8b1, 0.3);

@include keyframes(star) {
  0%   { opacity: 1.0; }
  20%  { opacity: 0.2; }
  50%  { opacity: 0.7; }
  70%  { opacity: 0.1; }
  100% { opacity: 1.0; }
}

@include keyframes(burst) {
  0%   { opacity: 1.0; fill: #e4522a; @include transform(scale(1));  @include transform-origin(center center); }
  50%  { opacity: 0.9; fill: #c14625; @include transform(scale(0.7));  @include transform-origin(center center); }
  60%  { opacity: 0.9; fill: #ed9025; @include transform(scale(1.1));  @include transform-origin(center center); }
  70%  { opacity: 0.9; fill: #c14625; @include transform(scale(0.9));  @include transform-origin(center center); }
  100% { opacity: 1.0; fill: #e4522a; @include transform(scale(1));  @include transform-origin(center center); }
}

@include keyframes(steeler) {
  0%   { opacity: 1.0; fill: $steeler-fill1; @include transform(scale(1));   @include transform-origin(center center); }
  40%  { opacity: 0.9; fill: #95a8b1;        @include transform(scale(0.7)); @include transform-origin(center center); }
  70%  { opacity: 0.9; fill: $steeler-fill1; @include transform(scale(1.1)); @include transform-origin(center center); }
  100% { opacity: 1.0; fill: $steeler-fill2; @include transform(scale(0.9)); @include transform-origin(center center); }
}

.star { fill: #95a8b1; @include animation(star 5s linear infinite); }
.burst { fill: #e4522a; @include animation(burst 1s linear infinite); }
.steeler { fill: $steeler-fill1; @include animation(steeler 2s linear infinite); }

@for $i from 1 through 19 {
  $delay: ($i * 0.1) * 1.0s;
  .ad-#{$i} { @include animation-delay($delay); }
}

@include keyframes(planet) {
  0% { @include transform(translate(100px, 800px) scale(6.0) rotate(0deg)); }
  100% { @include transform(translate(100px, 800px) scale(6.0) rotate(100deg)); }
}

#planet {
  @include animation(planet 60s linear infinite);
}

#planet, #planet-bg {
  @include transform(translate(100px, 800px) scale(6.0));
  @include transform-style(preserve-3d);
  @include transform-origin(center center);
}

left-nav.svg