Pastel Hexagon Party

index.html

<div class="wrapper">
   <div class="background background_1"></div>
   <div class="background background_2"></div>
   <div class="background background_3"></div>
   <div class="background background_4"></div>

   <div class="row row_1">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_2">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_3">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_4">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_4"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_5">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_3"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_6">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_2"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
   <div class="row row_7">
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
      <div class="hexagon ring ring_1"><span></span></div>
   </div>
</div>

pastel-hexagon-party.markdown

Pastel Hexagon Party

Hexagons by @brnnbrn http://csshexagon.com/ Color palette inspired by @chelsea

A Pen by Amanda Glosson on CodePen.

License.

style.scss

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

body {
   background: #fff;
   overflow: hidden;
   text-align: center;
}

$orange: #F5D3AB;
$lightOrange: #FBEBD9;

$blue: #A3E8D7;
$lightBlue: #D6ECE8;

$red: #E5B4A0;
$lightRed: #EFE2DC;

$green: #CDECA3;
$lightGreen: #E5ECD9;

.wrapper {
   margin: 0 auto;
   min-width: 730px;
   position: relative;
   transform: perspective(600px) rotateX(60deg);
   transform-style: preserve-3d;
   animation: spin 10s infinite linear;
}

.background {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   animation: backgroundColors 6s infinite linear;
}

.background_1 {
   background: radial-gradient(circle closest-side, $orange 0%, #ffffff 100%);
   opacity: 0;
   animation-delay: 1s;
}

.background_2 {
   background: radial-gradient(circle closest-side, $green 0%, #ffffff 100%);
   opacity: 0;
   animation-delay: 2.5s;
}

.background_3 {
   background: radial-gradient(circle closest-side, $blue 0%, #ffffff 100%);
   opacity: 0;
   animation-delay: 4s;
}

.background_4 {
   background: radial-gradient(circle closest-side, $red 0%, #ffffff 100%);
   opacity: 0;
   animation-delay: 5.5s;
}

.row {
   margin-top: -28.87px;
}

.row:first-child {
   margin-top: 0;
}

.hexagon {
   display: inline-block;
   position: relative;
   width: 100px; 
   height: 57.74px;
   background-color: #fff;
   margin: 28.87px 0;
   border-left: solid 3px $lightOrange;
   border-right: solid 3px $lightOrange;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11.6447px;
}

.hexagon:before {
  top: -35.3553px;
  border-top: solid 4.2426px $lightOrange;
  border-right: solid 4.2426px $lightOrange;
}

.hexagon:after {
  bottom: -35.3553px;
  border-bottom: solid 4.2426px $lightOrange;
  border-left: solid 4.2426px $lightOrange;
}

.hexagon span {
  display: block;
  position: absolute;
  top:1.7320508075688772px;
  left: 0;
  width:94px;
  height:54.2709px;
  z-index: 2;
  background: inherit;
}

.ring {
   transform: translate3d(0, 0, 101px);
}

.ring.ring_1.hexagon {
   animation: ringMovement 1.5s 0s infinite linear, ringColors 6s 1s infinite linear;
}

.ring.ring_1.hexagon:after,
.ring.ring_1.hexagon:before {
   animation: ringColors 6s 1s infinite linear;
}

.ring.ring_2.hexagon {
   animation: ringMovement 1.5s 0.33s infinite linear, ringColors 6s 1.33s infinite linear;
}

.ring.ring_2.hexagon:after,
.ring.ring_2.hexagon:before {
   animation: ringColors 6s 1.33s infinite linear;
}

.ring.ring_3.hexagon {
   animation: ringMovement 1.5s 0.66s infinite linear, ringColors 6s 1.66s infinite linear;
}

.ring.ring_3.hexagon:after,
.ring.ring_3.hexagon:before {
   animation: ringColors 6s 1.66s infinite linear;
}

.ring.ring_4.hexagon {
   animation: ringMovement 1.5s 0.99s infinite linear, ringColors 6s 1.99s infinite linear;
}

.ring.ring_4.hexagon:after,
.ring.ring_4.hexagon:before {
   animation: ringColors 6s 1.99s infinite linear;
}

@keyframes ringMovement {
   from { transform: translate3d(0, 0, 101px); }
   50% { transform: translate3d(0, 0, 151px); }
   66% { transform: translate3d(0, 0, 1px); }
   to { transform: translate3d(0, 0, 101px); }
}

@keyframes ringColors {
   from { border-color: $lightOrange; }
   25% { border-color: $lightOrange; }
   25.01% { border-color: $lightGreen; }
   50% { border-color: $lightGreen; }
   50.01% { border-color: $lightBlue; }
   75% { border-color: $lightBlue; }
   75.01% { border-color: $lightRed; }
   to { border-color: $lightRed; }
}

@keyframes backgroundColors {
   from { opacity: 0; }
   0.01% { opacity: 1; }
   25% { opacity: 1; }
   25.01% { opacity: 0; }
   to { opacity: 0; }
}

@keyframes spin {
   from { transform: perspective(600px) rotateX(60deg) rotateZ(0deg); }
   to { transform: perspective(600px) rotateX(60deg) rotateZ(360deg); }
}