The Power of Pure CSS - No JavaScript Needed

body{
		width: 1366px;
		height:1366px;
		background:;
	}

.first{
					width: 475px;
					height: 217px;
					background: green;
					transform: rotate(90deg) rotateX(90deg) rotateZ(0deg) translate3d(4px,0px,-87px);
					overflow: hidden;
					visibility: hidden;
					position: absolute;
					transition: all 0.5s ease;
	}
		
		.first2{
					width: 475px;
					height: 217px;
					background: green;
					transform: rotate(90deg) rotateX(90deg) rotateZ(0deg) translate3d(4px,0px,-238px);
					overflow: hidden;
					visibility: hidden;
					position: absolute;
					transition: all 0.5s ease;
	}

.second{
					width: 500px;
					height: 216px;
					background: red;
					transform: rotate(-60deg);
					overflow: hidden;
	}

.third{
					width: 500px;
					height: 216px;
					background:orange;
					background-position: center;
					background-size: 80%;
					transform: rotate(-60deg);
					overflow: hidden;
					visibility: visible;
	}

.sides{
					width: 150px;
					height: 125px;
					background: gray;
					position: absolute;
	}

.s1{ 
				transform: rotateX(60deg)	translate3d(0px,31px,-162px);
				background: red;
	}

.sides.s2 {
				transform: rotateX(-60deg) translate3d(0px, 31px, -54px);
				background: blue;
	}

.s3{
			 transform: rotateX(60deg)	translate3d(0px, 32px, 54px);
			 ackground: green;
	}

.s4{
			transform: rotateX(-60deg) translate3d(0px, 32px, 161px);
			background: #9C27B0;
	}

.s5{
		 background: gray;
		 transform: translate3d(0px, 62px, 108px);
	}

.s6{
		 background: darkgray;
	}

.sides.S6{
		transform: translate3d(0px, 62px, -109px);
	}

@keyframes rotate{
			0%{transform: rotateY(0deg) rotateX(0deg) ;}
			00%{transform: rotateY(360deg) rotateX(360deg);}
	}

.main{
		width: 250px;
		height: 250px;
		perspective: 800px;
	}

.cube{
		width: 150px;
		height: 250px;
		margin-left: 250px;
		background:;
		transform-style: preserve-3d;
		transform: rotateY(70deg);
		animation: rotate 15s linear infinite;
	}

171

3D Hexagon Animation

By: pixeldev

:root {
  --sqrt3: 1.73205080757;                      /* Square root of 3 */
  --time: 11;                                  /* Duration of animation  */
  --gap: 1;                                    /* Horizontal gap between hexagons */
  --radius: 3;                                 /* Radius of inscribed circle */
  --Gap: var(--gap) / 2 * var(--sqrt3);        /* Vertical gap between hexagons */
  --Radius: 2 / var(--sqrt3) * var(--radius);  /* Radius of circumcircle */
}

@keyframes odd-animation {
  0%   { transform: translate(calc( 0.5 * var(--offset-x) ), calc( 0.5 * var(--offset-y) )) scale(0) }
  33%  { transform: translate(calc(   1 * var(--offset-x) ), calc(   1 * var(--offset-y) )) scale(1) }
  66%  { transform: translate(calc(   2 * var(--offset-x) ), calc(   2 * var(--offset-y) )) scale(1) }
  100% { transform: translate(calc(   3 * var(--offset-x) ), calc(   3 * var(--offset-y) )) scale(0) }
}

@keyframes even-animation {
  50%  { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) }
  100% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(0) }
}

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

.hex {
  color: white;
  display: flex;
  font-size: 3vmin;
  height: calc(2em * var(--Radius));
  width: calc(2em * var(--radius));
}

.hex::before {
  border: calc(0.5em * var(--Radius)) solid transparent;
  border-left: 0;
  border-right: calc(1em * var(--radius)) solid currentColor;
  content: "";
  height: var(--Radius);
}

.hex::after  {
  border: calc(0.5em * var(--Radius)) solid transparent;
  border-left: calc(1em * var(--radius)) solid currentColor;
  border-right: 0;
  content: "";
  height: var(--Radius);
}

.center {
  position: relative;
}

.odd,
.even {
  --global-offset-x: calc( 0.5em * var(--gap) + var(--radius) * 1em);
  --global-offset-y: calc( 1.5em * var(--Radius) + var(--Gap) * 1em);
  animation: infinite cubic-bezier(.21, .61, .01, .89);
  position: absolute;
  transform: translate(0, 0) scale(0);  
}

.odd {
  animation-duration: 11s;
}
.even {
  animation-duration: 7.333333333s;
}

.hex.first {
  animation-delay: -6.2857142857s;
}
.hex.second {
  animation-delay: -2.619047619s;
}
.hex.third {
  animation-delay: 1.0476190476s;
}

@supports (animation-delay: calc(1 * 1s)) and (animation-duration: calc(1 * 1s)) {
  .odd {
    animation-duration: calc(var(--time) * 1s);
  }
  .even {
    animation-duration: calc( var(--time) * 2 / 3 * 1s);
  }
  
  .hex.first {
    animation-delay: calc( var(--time) / -1.75 * 1s );
  }
  .hex.second {
    animation-delay: calc( var(--time) * 1.25 / -5.25 * 1s );
  }
  .hex.third {
    animation-delay: calc( var(--time) * -0.25 / -2.625 * 1s );
  }
}

.hex.one {
  --offset-x: calc( var(--global-offset-x) * 1 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: odd-animation;
  bottom: 0;
  left: 0;
}
.hex.two {
  --offset-x: calc( var(--global-offset-x) * 1.5 );
  --offset-y: calc( var(--global-offset-y) * -0.5 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 0.5 );
  left: calc( var(--global-offset-x) * 1.5 );
}
.hex.three {
  --offset-x: calc( var(--global-offset-x) * 2 );
  --offset-y: calc( var(--global-offset-y) * 0 );
  animation-name: odd-animation;
  bottom: 0;
  right: 0;
}
.hex.four {
  --offset-x: calc( var(--global-offset-x) * 1.5 );
  --offset-y: calc( var(--global-offset-y) * 0.5 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 0.5 );
  left: calc( var(--global-offset-x) * 1.5 );
}
.hex.five {
  --offset-x: calc( var(--global-offset-x) * 1 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: odd-animation;
  top: 0;
  left: 0;
}
.hex.six {
  --offset-x: calc( var(--global-offset-x) * 0 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 1 );
  left: 0;
}
.hex.seven {
  --offset-x: calc( var(--global-offset-x) * -1 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: odd-animation;
  top: 0;
  right: 0;
}
.hex.eight {
  --offset-x: calc( var(--global-offset-x) * -1.5 );
  --offset-y: calc( var(--global-offset-y) * 0.5 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 0.5 );
  right: calc( var(--global-offset-x) * 1.5 );
}
.hex.nine {
  --offset-x: calc( var(--global-offset-x) * -2 );
  --offset-y: calc( var(--global-offset-y) * 0 );
  animation-name: odd-animation;
  top: 0;
  right: 0;
}
.hex.ten {
  --offset-x: calc( var(--global-offset-x) * -1.5 );
  --offset-y: calc( var(--global-offset-y) * -0.5 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 0.5 );
  right: calc( var(--global-offset-x) * 1.5 );
}
.hex.eleven {
  --offset-x: calc( var(--global-offset-x) * -1 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: odd-animation;
  bottom: 0;
  right: 0;
}
.hex.twelve {
  --offset-x: calc( var(--global-offset-x) * 0 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 1 );
  left: 0;
}

118

Hexagon Animation

By: pixeldev

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: dodgerblue;
}
.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 3px solid white;
  animation: line 2s linear infinite;
  height: 50px;
  width: 500px;
}
.hexagon {
  position: absolute;
  width: 80px;
  height: 50px;
  background: #fff;
  left: 0;
  bottom: 20px;
  animation: linee 2s linear infinite;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: rotate(60deg);
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: rotate(-60deg);
}
@keyframes linee {
  0% {
    transform: rotate(0deg);
    left: 0;
  }
  50% {
    transform: rotate(360deg);
    left: 420px;
  }
  100% {
    transform: rotate(0deg);
    left: 0;
  }
}

@keyframes line {
  0% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-30deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
}

104

Sliding Hexagon Loading Animation – Pure Css Tutorials – Css Animation Effects

By: pixeldev

87

Three Hexagons Using Pure CSS

By: pixeldev

:root {
	--w: 8vmin;  /*** change width  ***/
	--h: 15vmin; /*** change height ***/
	--m: 8vmin;  /*** change margin ***/
	--s: 1.25s;  /*** change speed  ***/
}

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(#311d54 15%, #000000 100%);
	font-family: 'Averia Sans Libre', Arial, sans-serif;
	overflow: hidden;
}

.content {
    height: 100vh;
    width: 100vw;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pipe {
    width: var(--w);
    height: var(--w);
    background: linear-gradient(90deg, #be9aff, #673ab7);
    position: absolute;
	animation: grow var(--s) ease-in-out 0s infinite alternate;
	z-index: 50;
	box-shadow: 1vmin 15vmin 5vmin 0vmin #00000020;
	filter: hue-rotate(-15deg);
}

.pipe:before, .pipe:after {
    content: "";
    width: 100%;
    height: calc(var(--w) / 2);
    background: #be9aff;
    position: absolute;
    left: 0;
    top: calc(calc(var(--w) / 4) * -1);
    border-radius: 100%;
}

.pipe:after {
    top: inherit;
    bottom: calc(calc(var(--w) / 4) * -1);
    background: linear-gradient(90deg, #be9aff, #673ab7);
}

@keyframes grow {
	  0% { height: var(--w); filter: hue-rotate(-15deg) brightness(0.85) ;}
	100% { height: var(--h); filter: hue-rotate(-25deg) brightness(1.15) ;}
}

.pipe:nth-child(1n+2) {
    animation-delay: 0.2s
}
.pipe:nth-child(1n+8) {
    animation-delay: 0.4s
}
.pipe:nth-child(1n+20) {
    animation-delay: 0.6s
}
.pipe:nth-child(1n+38) {
    animation-delay: 0.8s
}
.pipe:nth-child(1n+62) {
    animation-delay: 1s
}

/*** 2 ***/
.pipe:nth-child(2) {
	margin-top: var(--m);
	margin-left: var(--m);
	z-index: 51;
}
.pipe:nth-child(3) {
	margin-top: var(--m);
	margin-left: calc(var(--m) * -1);
	z-index: 51;
}
.pipe:nth-child(4) {
	margin-top: 0vmin;
    margin-left: calc(var(--m) * 2);
    z-index: 50;
}
.pipe:nth-child(5) {
	margin-left: calc(var(--m) * -2);
	z-index: 50;
}
.pipe:nth-child(6) {
	margin-left: var(--m);
    margin-top: calc(var(--m) * -1);
    z-index: 49;
}
.pipe:nth-child(7) {
	margin-top: calc(var(--m) * -1);
	margin-left: calc(var(--m) * -1);
	z-index: 49;
}

/*** 3 ***/
.pipe:nth-child(8) {
	margin-top: calc(var(--m) * 2);
    z-index: 51;
}
.pipe:nth-child(9) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * 3);
    z-index: 50;
}
.pipe:nth-child(10) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * -3);
    z-index: 50;
}
.pipe:nth-child(11) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * -3);
    z-index: 49;
}
.pipe:nth-child(12) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * 3);
    z-index: 49;
}
.pipe:nth-child(13) {
	margin-top: calc(var(--m) * -2);
    margin-left: 0;
    z-index: 48;
}
.pipe:nth-child(14) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * 2);
    z-index: 51;
}
.pipe:nth-child(15) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * -2);
    z-index: 51;
}
.pipe:nth-child(16) {
	margin-top: 0;
    margin-left: calc(var(--m) * 4);
    z-index: 49;
}
.pipe:nth-child(17) {
	margin-top: 0;
    margin-left: calc(var(--m) * -4);
    z-index: 49;
}
.pipe:nth-child(18) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * -2);
    z-index: 48;
}
.pipe:nth-child(19) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * 2);
    z-index: 48;
}

/*** 4 ***/
.pipe:nth-child(20) {
	margin-top: calc(var(--m) * 3);
    margin-left: var(--m);
    z-index: 51;
}
.pipe:nth-child(21) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * -1);
    z-index: 51;
}
.pipe:nth-child(22) {
	margin-top: calc(var(--m) * -3);
    margin-left: var(--m);
    z-index: 47;
}
.pipe:nth-child(23) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * -1);
    z-index: 47;
}
.pipe:nth-child(24) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * 3);
    z-index: 47;
}
.pipe:nth-child(25) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * -3);
    z-index: 47;
}
.pipe:nth-child(26) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * 4);
    z-index: 47;
}
.pipe:nth-child(27) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * -4);
    z-index: 47;
}
.pipe:nth-child(28) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * 5);
    z-index: 47;
}
.pipe:nth-child(29) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * -5);
    z-index: 47;
}
.pipe:nth-child(30) {
	margin-top: 0;
    margin-left: calc(var(--m) * 6);
    z-index: 47;
}
.pipe:nth-child(31) {
	margin-top: 0;
    margin-left: calc(var(--m) * -6);
    z-index: 47;
}
.pipe:nth-child(32) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * 5);
    z-index: 49;
}
.pipe:nth-child(33) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * -5);
    z-index: 49;
}
.pipe:nth-child(34) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * 4);
    z-index: 50;
}
.pipe:nth-child(35) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * -4);
    z-index: 50;
}
.pipe:nth-child(36) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * 3);
    z-index: 51;
}
.pipe:nth-child(37) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * -3);
    z-index: 51;
}

/*** 5 ***/
.pipe:nth-child(38) {
	margin-top: calc(var(--m) * 4);
    margin-left: 0;
    z-index: 51;
}
.pipe:nth-child(39) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * -2);
    z-index: 51;
}
.pipe:nth-child(40) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * 2);
    z-index: 51;
}
.pipe:nth-child(41) {
	margin-top: calc(var(--m) * -4);
    margin-left: 0;
    z-index: 46;
}
.pipe:nth-child(42) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * -2);
    z-index: 46;
}
.pipe:nth-child(43) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * 2);
    z-index: 46;
}
.pipe:nth-child(44) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * 4);
    z-index: 46;
}
.pipe:nth-child(45) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * -4);
    z-index: 46;
}
.pipe:nth-child(46) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * 5);
    z-index: 46;
}
.pipe:nth-child(47) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * -5);
    z-index: 46;
}
.pipe:nth-child(48) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * 6);
    z-index: 46;
}
.pipe:nth-child(49) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * -6);
    z-index: 46;
}
.pipe:nth-child(50) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * 7);
    z-index: 46;
}
.pipe:nth-child(51) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * -7);
    z-index: 46;
}
.pipe:nth-child(52) {
	margin-top: 0;
    margin-left: calc(var(--m) * 8);
    z-index: 46;
}
.pipe:nth-child(53) {
	margin-top: 0;
    margin-left: calc(var(--m) * -8);
    z-index: 46;
}
.pipe:nth-child(54) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * 7);
    z-index: 47;
}
.pipe:nth-child(55) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * -7);
    z-index: 47;
}
.pipe:nth-child(56) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * 6);
    z-index: 49;
}
.pipe:nth-child(57) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * -6);
    z-index: 49;
}
.pipe:nth-child(58) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * 5);
    z-index: 50;
}
.pipe:nth-child(59) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * -5);
    z-index: 50;
}
.pipe:nth-child(60) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * 4);
    z-index: 51;
}
.pipe:nth-child(61) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * -4);
    z-index: 51;
}

/*** 6 ***/
.pipe:nth-child(62) {
	margin-top: calc(var(--m) * 5);
    margin-left: var(--m);
    z-index: 51;
}
.pipe:nth-child(63) {
	margin-top: calc(var(--m) * 5);
    margin-left: calc(var(--m) * -1);
    z-index: 51;
}
.pipe:nth-child(64) {
	margin-top: calc(var(--m) * 5);
    margin-left: calc(var(--m) * -3);
    z-index: 51;
}
.pipe:nth-child(65) {
	margin-top: calc(var(--m) * 5);
    margin-left: calc(var(--m) * 3);
    z-index: 51;
}
.pipe:nth-child(66) {
	margin-top: calc(var(--m) * 5);
    margin-left: calc(var(--m) * -5);
    z-index: 51;
}
.pipe:nth-child(67) {
	margin-top: calc(var(--m) * 5);
    margin-left: calc(var(--m) * 5);
    z-index: 51;
}
.pipe:nth-child(68) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * -6);
    z-index: 50;
}
.pipe:nth-child(69) {
	margin-top: calc(var(--m) * 4);
    margin-left: calc(var(--m) * 6);
    z-index: 50;
}
.pipe:nth-child(70) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * -7);
    z-index: 49;
}
.pipe:nth-child(71) {
	margin-top: calc(var(--m) * 3);
    margin-left: calc(var(--m) * 7);
    z-index: 49;
}
.pipe:nth-child(72) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * -8);
    z-index: 48;
}
.pipe:nth-child(73) {
	margin-top: calc(var(--m) * 2);
    margin-left: calc(var(--m) * 8);
    z-index: 48;
}
.pipe:nth-child(74) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * -9);
    z-index: 47;
}
.pipe:nth-child(75) {
	margin-top: var(--m);
    margin-left: calc(var(--m) * 9);
    z-index: 47;
}
.pipe:nth-child(76) {
	margin-top: 0;
    margin-left: calc(var(--m) * -10);
    z-index: 46;
}
.pipe:nth-child(77) {
	margin-top: 0;
    margin-left: calc(var(--m) * 10);
    z-index: 46;
}
.pipe:nth-child(78) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * -9);
    z-index: 45;
}
.pipe:nth-child(79) {
	margin-top: calc(var(--m) * -1);
    margin-left: calc(var(--m) * 9);
    z-index: 45;
}
.pipe:nth-child(80) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * -8);
    z-index: 44;
}
.pipe:nth-child(81) {
	margin-top: calc(var(--m) * -2);
    margin-left: calc(var(--m) * 8);
    z-index: 44;
}
.pipe:nth-child(82) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * -7);
    z-index: 43;
}
.pipe:nth-child(83) {
	margin-top: calc(var(--m) * -3);
    margin-left: calc(var(--m) * 7);
    z-index: 43;
}
.pipe:nth-child(84) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * -6);
    z-index: 42;
}
.pipe:nth-child(85) {
	margin-top: calc(var(--m) * -4);
    margin-left: calc(var(--m) * 6);
    z-index: 42;
}
.pipe:nth-child(86) {
	margin-top: calc(var(--m) * -5);
    margin-left: calc(var(--m) * -5);
    z-index: 41;
}
.pipe:nth-child(87) {
	margin-top: calc(var(--m) * -5);
    margin-left: calc(var(--m) * 5);
    z-index: 41;
}
.pipe:nth-child(88) {
	margin-top: calc(var(--m) * -5);
    margin-left: calc(var(--m) * -3);
    z-index: 41;
}
.pipe:nth-child(89) {
	margin-top: calc(var(--m) * -5);
    margin-left: calc(var(--m) * 3);
    z-index: 41;
}
.pipe:nth-child(90) {
	margin-top: calc(var(--m) * -5);
    margin-left: calc(var(--m) * -1);
    z-index: 41;
}
.pipe:nth-child(91) {
	margin-top: calc(var(--m) * -5);
    margin-left: var(--m);
    z-index: 41;
}

84

Hexagonal Breathing Grid – Pure CSS

By: pixeldev

.container {
  width: 20%;
  min-width: 180px;
  margin: 0 auto;
}

a {
  display: block;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  width: 78%;
  position: relative;
  z-index: 10;
  background: lightblue;
  margin: 10px 11%;
}

a:hover {
  background: #87C0D3;
}

span {
  display: block;
  padding: 8px 30px;
  position: relative;
  z-index: 10;
  background: inherit;
  text-align: center;
}

a::before, a::after, span::before, span::after {
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 50%;
  background: inherit;
  z-index: -1;
  background-clip: padding-box;
  border-color: #eee;
  border-style: solid;
  border-width: 0;
}

a::before {
  top: -10px;
  left: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-top-width: 10px;
  border-right-width: 12px;
}

a::after {
  top: -10px;
  right: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-top-width: 10px;
  border-left-width: 12px;
}

span::before {
  top: 50%;
  left: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-bottom-width: 10px;
  border-right-width: 12px;
}

span::after {
  top: 50%;
  right: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-bottom-width: 10px;
  border-left-width: 12px;
}

83

Hexagon button with pure CSS

By: pixeldev

79

Hexagon to Square

By: pixeldev

<div class="result">
  <div class="preview">
    <div class="row">
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
    </div>
    <div class="row even">
      <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    </div>
  </div>
</div>

div, div:before, div:after {
  box-sizing: border-box;
}

.result {
  display: inline-block;
  padding: 13.33333px;
  background-color: #fefefe;
  background-image: linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke),
                    linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.preview {
  box-sizing: border-box;
}

.hexagon {
  float: left;
  position: relative;
  width: 300px;
  height: 175px;
  background-color: #0088ff;
  margin: 86px 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-left: solid 150px #333333;
  border-right: solid 150px #333333;
  transition: all 0.3s ease-in;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 212px;
  transform: scaleY(0.5) rotate(-45deg);
  background-color: inherit;
  left: -106px;
  transition: all 0.3s ease-in;
}

.hexagon::before {
  top: -106px;
  border-top: solid 212px #333333;
  border-right: solid 212px #333333;
}

.hexagon::after {
  bottom: -106px;
  border-bottom: solid 212px #333333;
  border-left: solid 212px #333333;
}

.hexagon span {
  display: block;
  position: absolute;
  top: 86px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  background: inherit;
  opacity: 0;
  transition: all 0.3s ease-in;
  overflow: hidden;
}

.hexagon .content {
  padding: 0 10px;
}

.hexagon .content p {
  color: #fff;
}

.hexagon .content .title {
  font-weight: 100;
  font-size: 26px;
  text-transform: uppercase;
  margin: 10px 0 15px;
}

.hexagon:hover {
  border-left-width: 20px;
  border-right-width: 20px;
}

.hexagon:hover::before,
.hexagon:hover::after {
  left: 24px;
}

.hexagon:hover::before {
  border-top-width: 28px;
  border-right-width: 28px;
}

.hexagon:hover::after {
  border-bottom-width: 28px;
  border-left-width: 28px;
}

.hexagon:hover span {
  opacity: 1;
  top: 11px;
  width: 260px;
  height: 150px;
}

.even {
  padding-left: 160px;
}

.even .hexagon {
  margin: 0 10px 86px 0;
}

body {
  background: #3c9;
  font-family: Helvetica, Arial, sans-serif;
}

79

CSS Hexagon Grid with animation

By: pixeldev

body {
    background: #282828; /* #492540/* #282828; */
}

#grid {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 0; /* Clears unordered list default of 40px */
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
#grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    background: fd005f;
    visibility: hidden;
    overflow: hidden;
}
#grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdbf00;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
}
#grid li * {
    visibility: visible;
}
#grid li:nth-child(3n+2) {
  margin: 0 1%;
}
#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}

73

Pure CSS Hexagonal Grid

By: pixeldev

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	--spd: 2s; /* change speed */	
	--u: 0.4vmin;
	--r1: calc(var(--u) * 4);
	--r2: calc(var(--u) * 4.1);
	--r3: calc(var(--u) / 12);
	--r4: calc(var(--u) / 2.5);
	--r5: calc(var(--u) / 2.25);
	--r6: calc(var(--u) / 2);
	--c0: #1a1a1a;
	--c1: #1c1c1c;
	--c2: #404040;
	--c3: #525252;
	--c4: #808080;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
	--border-fix: var(--c0) 0 25%, #fff0 0 100%;
	--screw1: var(--c4) var(--r3), #fff0 var(--r4);
	--screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6);
	--hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%;
	--hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%;
	--hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%;
	height: 100vh;
	background: /* border fix */ conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp), /* screws */ radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp), radial-gradient(circle at 99.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 17%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 17%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 67.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 68%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 31.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 32%, var(--screw2)) var(--gp), /* holes */ radial-gradient(circle at 100% 50%, var(--hole1)) var(--gp), radial-gradient(circle at 98% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 102% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 0% 50%, var(--hole1)) var(--gp), radial-gradient(circle at -2% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 2% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 100%, var(--hole1)) var(--gp), radial-gradient(circle at 48% 98%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 102%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 0%, var(--hole1)) var(--gp), radial-gradient(circle at 48% -2%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 2%, var(--hole3)) var(--gp), /*background*/ linear-gradient(0deg, var(--c2) 33%, #ffffff20 55% 65%, var(--c3) 70% );
	background-color: var(--c2);

}

body:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #fff0 0 41.35%, #585858 41.55% 44%, #0e0e0e 44%, #1c1c1c 50%, #0e0e0e 56%, #494949 56% 58.425%, #fff0 58.475% 100%);
	background: linear-gradient(180deg, #fff0 0 41.5%, #585858 41.6% 44%, #0e0e0e 44%, #1c1c1c 45% 55%, #0e0e0e 56%, #494949 56% 58.55%, #fff0 58.6% 100%);
}

.content {
	width: 100vmin;
	height: 100vmin;
}

.content:before {
	content: "";
	width: 70vmin;
	height: 70vmin;
	position: absolute;
	left: calc(50% - 35vmin);
	border-radius: 100%;
	top: calc(50% - 35vmin);
	box-shadow: 0.5vmin 0.5vmin 1vmin #0a0a0a, -0.5vmin -0.5vmin 1vmin #222;
}

.door {
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #000, #0b102e);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	clip-path: circle(35.4% at 50% 50%);
}

.door:before {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	left: -50%;
	background-image: 
		repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .004%, transparent .074%), 
		radial-gradient(ellipse at 20% 30%, #80008030, #80008020, #ffa50030, #fff0, #fff0);
	animation: spin 500s linear 0s infinite;
	border-radius: 100%;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

.door:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 222;
	box-sizing: border-box;
	border-radius: 100%;
	background: radial-gradient(#fff0 0 40%, #858585 calc(40% + 1px), #686868 43% 46% , #484848 50%, #3330 calc(50% + 1px) 100%);
	filter: drop-shadow(-2px -2px 5px #0009);
	box-shadow: -5vmin -5vmin 5vmin 10vmin #222 inset, 5vmin 5vmin 5vmin 10vmin #cdcdcd inset;
}

body:hover .panel {
	animation-duration: 1s;
}

.panel {
	--p: #999999;
	--p1: #787878;
	--p2: #4e4e4e;
	--rin: var(--p2) 0 0.5vmin, var(--p1) calc(0.5vmin + 1px) 0.75vmin, var(--p2) calc(0.75vmin + 1px) 1.25vmin, #f000 calc(1.25vmin + 1px) 100%;
	--con: var(--p2) 0 60deg, #fff0 0 100%;
	--lin: #fff0 33%, var(--p1) calc(33% + 1px), #fff0 calc(33% + 2px);
	animation: start1 var(--spd) ease-in-out 0s 1;
	--tri: var(--p2) 0deg, var(--p) 30deg, var(--p2) 60deg, #fff0 0 100%;
	--rad: #999999 0, #434343 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%;
	width: 57.5%;
	height: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: all 2s ease 0s;
	filter: drop-shadow(0px 0px 1px #222);
	background: linear-gradient(120deg, var(--lin)), radial-gradient(circle at 50% 4.75vmin, var(--rin)), radial-gradient(circle at 50% 5%, var(--rad)), conic-gradient(from 150deg at 50% 7%, var(--tri)), conic-gradient(from 150deg at 50% 0%, var(--p2) 0 60deg, #fff0 0 100%);

}

.panel:nth-child(2) {
	background: 
		linear-gradient(60deg, var(--lin)),
		radial-gradient(circle at 3.55vmin 2.35vmin, var(--rin)),  
		radial-gradient(circle at 3% 2.5%, var(--rad)),
		conic-gradient(from 90deg at 5% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	left: 64.5%;
	top: 25%;
	animation-name: start2;
}

.panel:nth-child(3) {
	background: 
		linear-gradient(0deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 3.55vmin 95.5%, var(--rin)), 
		radial-gradient(circle at 3% 98%, var(--rad)),
		conic-gradient(from 30deg at 5% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	left: 35.5%;
	top: -25%;
	animation-name: start3;
}

.panel:nth-child(4) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		radial-gradient(circle at 50% 91%, var(--rin)), 	
		radial-gradient(circle at 50% 96%, var(--rad)),
		conic-gradient(from -30deg at 50% 93%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	top: 0;
	left: -7.75%;
	animation-name: start4;
}
.panel:nth-child(5) {  
	background: 
		linear-gradient(-120deg, var(--lin)),
		radial-gradient(circle at 93.5% 95%, var(--rin)), 		
		radial-gradient(circle at 97% 98%, var(--rad)),
		conic-gradient(from 270deg at 95% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 25%;
	left: -22.25%;
	animation-name: start5;
}

.panel:nth-child(6) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		linear-gradient(180deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 93.5% 5%, var(--rin)), 	
		radial-gradient(circle at 97% 2.5%, var(--rad)),
		conic-gradient(from 210deg at 95% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--p2) 60deg, #fff0 0 100%);
	top: 75%;
	left: 7%;
	animation-name: start6;
}

.door:hover .panel:nth-child(1) {
	left: calc(50% - 28.75% );
}

.door:hover .panel:nth-child(2) {
	left: 50%;
	top: 50%;
}

.door:hover .panel:nth-child(3) {
	left: 50%;
	top: 0;
}

.door:hover .panel:nth-child(4) {
	left: calc(50% - 28.75%);
	top: 0;
}

.door:hover .panel:nth-child(5) {
	top: 0;
	left: -7.65%;
}

.door:hover .panel:nth-child(6) {
	left: -7.5%;
	top: 50%;	
}

@keyframes start1 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: 50%; }
}

@keyframes start2 {
	0% { top: 50%; left: 50%; }
	100% { top: 25%; left: 64.5%; }
}

@keyframes start3 {
	0% { top: 0;    left: 50%; }
	100% { top: -25%; left: 35.5%; }
}

@keyframes start4 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: -7.75%; }
}

@keyframes start5 {
	0% { top: 0;   left: -7.65%; }
	100% { top: 25%; left: -22.25%; }
}

@keyframes start6 {
	0% { top: 50%; left: -7.5%; }
	100% { top: 75%; left: 7%; }
}

70

Iris Door (hexagonal) – Pure CSS

By: pixeldev

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

68

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

66