Monster Energy SVG logo animation

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

📙Table Of Content

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

Monster Energy SVG logo animation HTML CODE

  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.scss">
</head>
<body>

  <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>
</body>
</html>

Monster Energy SVG logo animation CSS CODE


@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));
  }
}

Live Preview of Monster Energy SVG logo animation

See the Pen Monster Energy SVG logo animated by Codewithshobhit (@Codewithshobhit) on CodePen.

Codewithshobhit
Star Icon Star Fork Icon Fork Download Icon Download

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.

Which Code Editor do you use to create those projects?

I am using VS Code Studio.

is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on  Instagram

if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉