octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<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>
            
          
!
            
              @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));
  }
}
            
          
!
            
              /*
 * 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
 */
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console