CodePen Embed - Creative Hexagon with Hover Effect


  <div class="container">
		<div class="row">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
      
		</div>
		<div class="row altline2">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
      
		</div>
		<div class="row line2">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row altline3">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row line3">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row altline4">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row line4">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row altline5">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row line5">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
		<div class="row">
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
			<div class="hexagon"></div>
		</div>
	</div>

*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			background: #000;
			min-height: 100vh;
		}
		.container{
			position: relative;
			overflow: hidden;
			height: 100vh;
			animation: animate 4s linear infinite;
		}
		@keyframes animate{
			0%{
				filter: hue-rotate(0deg);
			}
			100%{
				filter: hue-rotate(360deg);
			}
		}
		.row{
			display: inline-flex;
			margin-left: -50px;
			margin-top: -32px;
			overflow: hidden;
		}
		.row:nth-child(even){
			margin-left: 1px;
		}
		.hexagon{
			position: relative;
			height: 110px;
			width: 100px;
			background: #111;
			margin: 1px;
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			transition: 2s;
		}
		.hexagon:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 100%;
			pointer-events: none;
			background: rgba(255, 255, 255, 0.02);
		}
		.hexagon:hover{
			transition: 0s;
			background: #0f0;
      cursor: alias;
		}

This Pen is owned by Swarup Kumar Kuila on CodePen.

See more by @uiswarup on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js