index.html

<div class="monster">

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   width="124.000000pt" height="174.000000pt" viewBox="0 0 124.000000 174.000000"
   preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,174.000000) scale(0.100000,-0.100000)"
  fill="#000000" stroke="none">
  <path d="M0 870 l0 -870 620 0 620 0 0 870 0 870 -620 0 -620 0 0 -870z m745
  779 c17 -10 40 -23 53 -29 12 -5 22 -16 22 -24 0 -8 12 -19 28 -24 25 -9 26
  -10 7 -18 -25 -10 -45 -29 -45 -44 0 -6 -9 -23 -20 -38 -17 -23 -19 -37 -15
  -82 3 -30 6 -66 6 -80 0 -14 5 -49 11 -77 9 -44 9 -56 -4 -70 -9 -10 -13 -24
  -11 -31 3 -7 0 -26 -6 -42 -8 -24 -6 -42 10 -87 24 -69 24 -84 1 -114 -38 -50
  -65 -149 -63 -229 1 -41 -3 -120 -9 -175 -9 -94 -8 -102 11 -128 14 -19 17
  -32 11 -40 -6 -7 -10 -28 -10 -47 -1 -75 -21 -170 -41 -196 -18 -23 -21 -24
  -21 -8 0 11 5 37 11 58 12 43 -1 105 -29 139 -12 14 -13 22 -3 43 6 14 9 29 7
  33 -3 4 -8 69 -11 145 -4 99 -11 145 -22 162 -12 19 -13 29 -3 61 7 21 16 43
  20 48 4 6 10 28 14 50 4 22 12 52 17 67 8 20 7 40 -6 84 -12 41 -15 74 -10
  116 5 38 3 63 -4 72 -7 8 -12 57 -13 120 -1 70 -5 107 -13 110 -8 3 -11 25 -9
  62 2 45 -2 64 -18 87 -12 16 -26 26 -34 23 -8 -3 -24 -1 -37 5 -16 7 -31 7
  -51 -1 -24 -9 -26 -13 -15 -26 11 -14 10 -18 -6 -30 -10 -8 -13 -14 -7 -14 20
  0 13 -28 -8 -35 -11 -3 -24 -14 -30 -24 -13 -25 -6 -91 11 -102 12 -7 11 -14
  -3 -41 -24 -48 -30 -75 -18 -83 6 -4 8 -20 4 -40 -3 -19 -1 -35 5 -39 6 -4 11
  -15 11 -24 0 -10 9 -35 21 -56 20 -38 20 -40 3 -78 -19 -42 -20 -119 -2 -147
  7 -11 2 -42 -16 -107 -18 -66 -23 -99 -17 -120 4 -16 6 -97 3 -180 -3 -101 -1
  -158 7 -172 7 -13 8 -28 2 -44 -10 -23 -10 -22 -10 5 -1 15 -7 38 -15 50 -7
  12 -19 60 -25 107 -7 46 -17 93 -23 104 -10 19 -19 78 -19 130 0 16 -7 35 -17
  42 -16 11 -15 15 6 58 22 47 32 166 13 166 -5 0 -9 29 -9 65 -1 71 -23 163
  -53 211 -18 30 -18 32 2 105 24 84 22 165 -5 184 -9 7 -16 23 -16 36 0 13 -4
  30 -8 37 -11 17 -120 44 -159 40 -72 -8 36 38 122 52 79 13 109 22 117 34 5 7
  8 5 8 -5 0 -9 6 -16 13 -16 43 -3 79 -12 93 -24 11 -9 18 -9 22 -2 11 17 81
  53 102 53 11 0 28 5 38 10 14 9 102 36 122 38 3 0 19 -8 35 -19z m317 -31 c2
  -6 14 -12 25 -13 28 -2 53 -23 53 -46 0 -9 7 -25 16 -33 8 -9 11 -16 5 -16 -6
  0 -11 -5 -11 -11 0 -5 5 -7 12 -3 7 4 8 3 4 -4 -4 -6 -2 -21 4 -33 9 -16 8
  -24 -4 -38 -9 -10 -13 -21 -9 -24 3 -4 -1 -15 -9 -24 -9 -10 -19 -34 -23 -53
  -4 -19 -12 -40 -17 -47 -15 -18 -16 -132 -2 -144 9 -8 9 -21 -1 -59 -12 -46
  -11 -52 11 -94 29 -55 30 -90 4 -149 -11 -25 -18 -56 -16 -69 3 -12 5 -23 6
  -23 10 0 5 -45 -7 -66 -11 -19 -13 -35 -8 -55 5 -16 7 -65 6 -109 -3 -65 -9
  -91 -33 -138 -17 -34 -26 -66 -23 -77 3 -10 1 -21 -4 -24 -12 -8 -25 74 -18
  112 3 15 1 41 -5 59 -9 25 -9 38 0 55 11 21 14 48 11 103 0 11 4 38 10 60 16
  61 15 204 -2 244 -10 24 -12 44 -5 73 7 33 5 46 -13 78 -18 32 -21 49 -16 94
  4 41 2 58 -9 67 -13 10 -12 15 4 33 26 29 31 185 7 210 -9 9 -22 16 -28 17
  -21 1 -71 8 -110 15 l-38 6 22 24 c12 13 30 24 40 24 27 0 86 28 92 44 3 8 18
  21 34 29 36 19 40 20 45 5z"/>
  </g>
  </svg>
  
</div>

<div class="monster">

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   width="124.000000pt" height="174.000000pt" viewBox="0 0 124.000000 174.000000"
   preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,174.000000) scale(0.100000,-0.100000)"
  fill="#000000" stroke="none">
  <path d="M0 870 l0 -870 620 0 620 0 0 870 0 870 -620 0 -620 0 0 -870z m745
  779 c17 -10 40 -23 53 -29 12 -5 22 -16 22 -24 0 -8 12 -19 28 -24 25 -9 26
  -10 7 -18 -25 -10 -45 -29 -45 -44 0 -6 -9 -23 -20 -38 -17 -23 -19 -37 -15
  -82 3 -30 6 -66 6 -80 0 -14 5 -49 11 -77 9 -44 9 -56 -4 -70 -9 -10 -13 -24
  -11 -31 3 -7 0 -26 -6 -42 -8 -24 -6 -42 10 -87 24 -69 24 -84 1 -114 -38 -50
  -65 -149 -63 -229 1 -41 -3 -120 -9 -175 -9 -94 -8 -102 11 -128 14 -19 17
  -32 11 -40 -6 -7 -10 -28 -10 -47 -1 -75 -21 -170 -41 -196 -18 -23 -21 -24
  -21 -8 0 11 5 37 11 58 12 43 -1 105 -29 139 -12 14 -13 22 -3 43 6 14 9 29 7
  33 -3 4 -8 69 -11 145 -4 99 -11 145 -22 162 -12 19 -13 29 -3 61 7 21 16 43
  20 48 4 6 10 28 14 50 4 22 12 52 17 67 8 20 7 40 -6 84 -12 41 -15 74 -10
  116 5 38 3 63 -4 72 -7 8 -12 57 -13 120 -1 70 -5 107 -13 110 -8 3 -11 25 -9
  62 2 45 -2 64 -18 87 -12 16 -26 26 -34 23 -8 -3 -24 -1 -37 5 -16 7 -31 7
  -51 -1 -24 -9 -26 -13 -15 -26 11 -14 10 -18 -6 -30 -10 -8 -13 -14 -7 -14 20
  0 13 -28 -8 -35 -11 -3 -24 -14 -30 -24 -13 -25 -6 -91 11 -102 12 -7 11 -14
  -3 -41 -24 -48 -30 -75 -18 -83 6 -4 8 -20 4 -40 -3 -19 -1 -35 5 -39 6 -4 11
  -15 11 -24 0 -10 9 -35 21 -56 20 -38 20 -40 3 -78 -19 -42 -20 -119 -2 -147
  7 -11 2 -42 -16 -107 -18 -66 -23 -99 -17 -120 4 -16 6 -97 3 -180 -3 -101 -1
  -158 7 -172 7 -13 8 -28 2 -44 -10 -23 -10 -22 -10 5 -1 15 -7 38 -15 50 -7
  12 -19 60 -25 107 -7 46 -17 93 -23 104 -10 19 -19 78 -19 130 0 16 -7 35 -17
  42 -16 11 -15 15 6 58 22 47 32 166 13 166 -5 0 -9 29 -9 65 -1 71 -23 163
  -53 211 -18 30 -18 32 2 105 24 84 22 165 -5 184 -9 7 -16 23 -16 36 0 13 -4
  30 -8 37 -11 17 -120 44 -159 40 -72 -8 36 38 122 52 79 13 109 22 117 34 5 7
  8 5 8 -5 0 -9 6 -16 13 -16 43 -3 79 -12 93 -24 11 -9 18 -9 22 -2 11 17 81
  53 102 53 11 0 28 5 38 10 14 9 102 36 122 38 3 0 19 -8 35 -19z m317 -31 c2
  -6 14 -12 25 -13 28 -2 53 -23 53 -46 0 -9 7 -25 16 -33 8 -9 11 -16 5 -16 -6
  0 -11 -5 -11 -11 0 -5 5 -7 12 -3 7 4 8 3 4 -4 -4 -6 -2 -21 4 -33 9 -16 8
  -24 -4 -38 -9 -10 -13 -21 -9 -24 3 -4 -1 -15 -9 -24 -9 -10 -19 -34 -23 -53
  -4 -19 -12 -40 -17 -47 -15 -18 -16 -132 -2 -144 9 -8 9 -21 -1 -59 -12 -46
  -11 -52 11 -94 29 -55 30 -90 4 -149 -11 -25 -18 -56 -16 -69 3 -12 5 -23 6
  -23 10 0 5 -45 -7 -66 -11 -19 -13 -35 -8 -55 5 -16 7 -65 6 -109 -3 -65 -9
  -91 -33 -138 -17 -34 -26 -66 -23 -77 3 -10 1 -21 -4 -24 -12 -8 -25 74 -18
  112 3 15 1 41 -5 59 -9 25 -9 38 0 55 11 21 14 48 11 103 0 11 4 38 10 60 16
  61 15 204 -2 244 -10 24 -12 44 -5 73 7 33 5 46 -13 78 -18 32 -21 49 -16 94
  4 41 2 58 -9 67 -13 10 -12 15 4 33 26 29 31 185 7 210 -9 9 -22 16 -28 17
  -21 1 -71 8 -110 15 l-38 6 22 24 c12 13 30 24 40 24 27 0 86 28 92 44 3 8 18
  21 34 29 36 19 40 20 45 5z"/>
  </g>
  </svg>
  
</div>

<div class="monster">

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   width="124.000000pt" height="174.000000pt" viewBox="0 0 124.000000 174.000000"
   preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,174.000000) scale(0.100000,-0.100000)"
  fill="#000000" stroke="none">
  <path d="M0 870 l0 -870 620 0 620 0 0 870 0 870 -620 0 -620 0 0 -870z m745
  779 c17 -10 40 -23 53 -29 12 -5 22 -16 22 -24 0 -8 12 -19 28 -24 25 -9 26
  -10 7 -18 -25 -10 -45 -29 -45 -44 0 -6 -9 -23 -20 -38 -17 -23 -19 -37 -15
  -82 3 -30 6 -66 6 -80 0 -14 5 -49 11 -77 9 -44 9 -56 -4 -70 -9 -10 -13 -24
  -11 -31 3 -7 0 -26 -6 -42 -8 -24 -6 -42 10 -87 24 -69 24 -84 1 -114 -38 -50
  -65 -149 -63 -229 1 -41 -3 -120 -9 -175 -9 -94 -8 -102 11 -128 14 -19 17
  -32 11 -40 -6 -7 -10 -28 -10 -47 -1 -75 -21 -170 -41 -196 -18 -23 -21 -24
  -21 -8 0 11 5 37 11 58 12 43 -1 105 -29 139 -12 14 -13 22 -3 43 6 14 9 29 7
  33 -3 4 -8 69 -11 145 -4 99 -11 145 -22 162 -12 19 -13 29 -3 61 7 21 16 43
  20 48 4 6 10 28 14 50 4 22 12 52 17 67 8 20 7 40 -6 84 -12 41 -15 74 -10
  116 5 38 3 63 -4 72 -7 8 -12 57 -13 120 -1 70 -5 107 -13 110 -8 3 -11 25 -9
  62 2 45 -2 64 -18 87 -12 16 -26 26 -34 23 -8 -3 -24 -1 -37 5 -16 7 -31 7
  -51 -1 -24 -9 -26 -13 -15 -26 11 -14 10 -18 -6 -30 -10 -8 -13 -14 -7 -14 20
  0 13 -28 -8 -35 -11 -3 -24 -14 -30 -24 -13 -25 -6 -91 11 -102 12 -7 11 -14
  -3 -41 -24 -48 -30 -75 -18 -83 6 -4 8 -20 4 -40 -3 -19 -1 -35 5 -39 6 -4 11
  -15 11 -24 0 -10 9 -35 21 -56 20 -38 20 -40 3 -78 -19 -42 -20 -119 -2 -147
  7 -11 2 -42 -16 -107 -18 -66 -23 -99 -17 -120 4 -16 6 -97 3 -180 -3 -101 -1
  -158 7 -172 7 -13 8 -28 2 -44 -10 -23 -10 -22 -10 5 -1 15 -7 38 -15 50 -7
  12 -19 60 -25 107 -7 46 -17 93 -23 104 -10 19 -19 78 -19 130 0 16 -7 35 -17
  42 -16 11 -15 15 6 58 22 47 32 166 13 166 -5 0 -9 29 -9 65 -1 71 -23 163
  -53 211 -18 30 -18 32 2 105 24 84 22 165 -5 184 -9 7 -16 23 -16 36 0 13 -4
  30 -8 37 -11 17 -120 44 -159 40 -72 -8 36 38 122 52 79 13 109 22 117 34 5 7
  8 5 8 -5 0 -9 6 -16 13 -16 43 -3 79 -12 93 -24 11 -9 18 -9 22 -2 11 17 81
  53 102 53 11 0 28 5 38 10 14 9 102 36 122 38 3 0 19 -8 35 -19z m317 -31 c2
  -6 14 -12 25 -13 28 -2 53 -23 53 -46 0 -9 7 -25 16 -33 8 -9 11 -16 5 -16 -6
  0 -11 -5 -11 -11 0 -5 5 -7 12 -3 7 4 8 3 4 -4 -4 -6 -2 -21 4 -33 9 -16 8
  -24 -4 -38 -9 -10 -13 -21 -9 -24 3 -4 -1 -15 -9 -24 -9 -10 -19 -34 -23 -53
  -4 -19 -12 -40 -17 -47 -15 -18 -16 -132 -2 -144 9 -8 9 -21 -1 -59 -12 -46
  -11 -52 11 -94 29 -55 30 -90 4 -149 -11 -25 -18 -56 -16 -69 3 -12 5 -23 6
  -23 10 0 5 -45 -7 -66 -11 -19 -13 -35 -8 -55 5 -16 7 -65 6 -109 -3 -65 -9
  -91 -33 -138 -17 -34 -26 -66 -23 -77 3 -10 1 -21 -4 -24 -12 -8 -25 74 -18
  112 3 15 1 41 -5 59 -9 25 -9 38 0 55 11 21 14 48 11 103 0 11 4 38 10 60 16
  61 15 204 -2 244 -10 24 -12 44 -5 73 7 33 5 46 -13 78 -18 32 -21 49 -16 94
  4 41 2 58 -9 67 -13 10 -12 15 4 33 26 29 31 185 7 210 -9 9 -22 16 -28 17
  -21 1 -71 8 -110 15 l-38 6 22 24 c12 13 30 24 40 24 27 0 86 28 92 44 3 8 18
  21 34 29 36 19 40 20 45 5z"/>
  </g>
  </svg>
  
</div>

Monster-Energy-SVG-logo-animated.markdown

Monster Energy SVG logo animated

A simple animation for the SVG version of the monsterenergy.com logo. Why? I love Monster Energy drinks.

Just :hover to reset the animation.

You can support this with a vote:

• Reddit
• Hacker News

This is a fan remake. Please don't sue me!

A Pen by Tim Pietrusky on CodePen.

License.

script.js

/*
 * Monster Energy SVG logo animated
 *
 * A simple animation for the monsterenergy.com logo.
 * Why? I love Monster Energy drinks. 
 * Just :hover to reset the animation. 
 *
 * 
 * You can support this with a vote:
 *
 * Reddit
 http://www.reddit.com/r/web_design/comments/1hxcw1/monster_energy_logo_as_svg_and_animated_with_css/
 *
 * Hacker News
 * https://news.ycombinator.com/item?id=6012419
 *
 * This is a fan remake. Please don't sue me!
 *
 * 
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */

style.scss

@import "compass/css3";
$color-alpha: #000;
$color-beta: #0c0;
$color-gamma: #c00;
$color-delta: #cc0;

$unit-alpha: 1.15s;
$unit-beta: 1s;
$unit-gamma: $unit-beta + -.3s;
$unit-delta: $unit-beta + .3s;
$unit-epsilon: $unit-alpha * 1.85;
$unit-zeta: .25em;

@mixin monster-background($color) {
  background-color: $color-alpha;
  
  background-image:     
    radial-gradient(circle, rgba(255, 255, 255, .45) 25%, transparent 30%),
    linear-gradient(to top, $color-alpha, $color-alpha 50%, darken($color, 35%) 50%, lighten($color, 15%) 100%);
  
  @include background(
    radial-gradient(circle, rgba(255, 255, 255, .45) 25%, transparent 30%),
    linear-gradient(bottom, $color-alpha, $color-alpha 50%, darken($color, 35%) 50%, lighten($color, 15%) 100%)
  );
  background-size: 100% 300%, 100% 200%;
  background-position: 100% 100%, 100% 100%;
}

body {
  background: $color-alpha;
}

.monster {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  height: 168pt;
  width: 120pt;
  animation: 
    alpha $unit-alpha 1 linear forwards $unit-beta,
    gamma $unit-epsilon infinite linear forwards ($unit-epsilon)
  ;
  
  @include transform(scale(1.25, 1.25) translate(-50%, -45%));
  @include monster-background($color-beta);
  @include transition(background .15s ease-in-out);
  @include backface-visibility(hidden);
  
  &:hover {
    animation: beta $unit-alpha 1 linear forwards $unit-beta;
    @include monster-background($color-alpha);
  }
  
  &:nth-child(2) {
    @include transform(scale(1, 1) translate(-200%, -50%));
    @include monster-background($color-gamma);
    animation: 
      alpha $unit-alpha 1 linear forwards $unit-gamma,
      gamma $unit-epsilon infinite linear forwards ($unit-epsilon + $unit-delta)
    ;
    
    &:hover {
      animation: beta $unit-alpha 1 linear forwards $unit-beta;
      @include monster-background($color-alpha);
    }
  }
  
  &:nth-child(3) {
    @include transform(scale(.75, .75) translate(100%, -60%));
    @include monster-background($color-delta);
    animation: 
      alpha $unit-alpha 1 linear forwards $unit-delta,
      gamma $unit-epsilon infinite linear forwards ($unit-epsilon + $unit-gamma)
    ;
    
    &:hover {
      animation: beta $unit-alpha 1 linear forwards $unit-beta;
      @include monster-background($color-alpha);
    }
  }
}

@keyframes alpha {
  0% {
    margin-top: -.5em;
    background-position: 100% 100%, 100% 100%;
  }
  
  70% {
    background-position: 100% 100%, 100% 85%;
  }
  
  75% {
    @include filter(blur(0));
  }
  
  80% {
    margin-top: -.5em;
  }
  
  85% {
    margin-top: $unit-zeta;
    @include filter(blur(5px));
  }
  
  100% {
    background-position: 100% 0, 100% 0%;
    margin-top: $unit-zeta;
    @include filter(blur(0));
  }
}

@keyframes beta {}

@keyframes gamma {
  0% {
    background-position: 100% 100%, 100% 0;
  }

  90% {
    opacity: .15; 
    background-position: 100% 100%, 100% 0;
    @include filter(blur(0));
  }
  
  95% {
    opacity: 1;
    @include filter(blur(5px));
  }
  
  100% {
    background-position: 100% 0, 100% 0;
    @include filter(blur(0));
  }
}