SVG Hexagon Hover Animation

In this example below you will see how to do a SVG Hexagon Hover Animation with some HTML / CSS and Javascript

Animate the properties of each SVG shape individually on hover

Thumbnail
This awesome code was written by leahwhittaker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright leahwhittaker ©
  • HTML
  • CSS
  • JavaScript
    <svg class="svg-defs">
  <defs>
    <clipPath id="hexagon">
      <polygon id="hexShape" points="-0.5,41.6 72,-0.1 144.5,41.6 144.5,125.1 72,166.8 -0.5,125.1" />
    </clipPath>
  </defs>
</svg>

<div id="wrapper">
  <div class="hex">
    <svg>
      <image xlink:href="http://lorempixel.com/g/200/200/?1" width="200" height="200" />
    </svg>
  </div>
  <div class="hex">
    <svg>
      <image xlink:href="http://lorempixel.com/g/200/200/?2" width="200" height="200" />
    </svg>
  </div>
  <div class="hex">
    <svg>
      <image xlink:href="http://lorempixel.com/g/200/200/?3" width="200" height="200" />
    </svg>
  </div>
  <div class="hex">
    <svg>
      <image xlink:href="http://lorempixel.com/g/200/200/?4" width="200" height="200" />
    </svg>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/leahwhittaker/svg-hexagon-hover-animation-xbEamo */
    body {
  background-color: #444;
}

#wrapper {
  margin: auto;
  width: 600px;
  height: 200px;
  position: relative;
}

.svg-defs {
  height: 0;
}

.hex {
  position: relative;
  float: left;
  clear: none;
  width: 145px;
  height: 167px;
}

.hex svg {
  width: 145px;
  height: 167px;
}

.hex image {
  clip-path: url(#hexagon);
}


/*Downloaded from https://www.codeseek.co/leahwhittaker/svg-hexagon-hover-animation-xbEamo */
    /*external js
https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js
*/

window.onload = function() {

  var hexagons = document.getElementsByClassName("hex");

  var hexagonSVGs = [];
  for (var i = 0; i < hexagons.length; i++) {
      hexagonSVGs.push(hexagons[i].getElementsByTagName("image")[0]);
  }

  for (var h = 0; h < hexagonSVGs.length; h++) {
    console.log(hexagonSVGs[h]);
    if (hexagonSVGs.hasOwnProperty(h)) {
      (function(e) {
        e.addEventListener('mouseover', function() {
          TweenLite.to(e, 0.2, {
            opacity: 0.1
          });
        });
        e.addEventListener('mouseout', function() {
          TweenLite.to(e, 0.2, {
            opacity: 1
          });
        });
      })(hexagonSVGs[h]);
    }
  }
}

Comments