Circle of heaxagrams

by Vitalii_N

HTML

<section>
  <div class="hexa-container">
    <div class="hexagon-wrapper main">
      <div class="hexagon main"></div>
    </div>
    <div class="hexa-bg"></div>
    
    <div class="item">
      <div class="hexagon-wrapper">
        <div class="hexagon"></div>
      </div>

      <div class="hexagon-wrapper inner">
        <div class="hexagon inner"></div>
      </div>
    </div>
  </div>
</section>

SCSS

$parent-size: 300px;
$child-size: calc(#{$parent-size} * 0.6764705);

html, body {
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
}

section {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Hexa container */
.hexa-container {
  display: block;
  position: relative;
	width: $parent-size;
	height: $parent-size;
	border: 1px solid rgba(0,0,0,0.1);
  top: 50%;
  left: 50%;
	transform: translate(-50%, -10%);
	transition: transform 0.7s linear;
}

/* Hexa item */
.item {
  position: relative;
  width: $child-size;
  height: $child-size;
  top: calc(#{$child-size} / -1); /* -child size/2 */
  left: calc(#{$parent-size} / 2 - #{$child-size} / 2); /* parent size/2 - child size/2 */
}

/* One hexagon */
.hexagon-wrapper {
  text-align: center;
  position: absolute;
  display: inline-block;
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  transition: 0.2s all;
  transform: translate(-50%, -50%);
  
  &.inner {
    width: 70%;
    height: 70%;
    
    &:hover {
      width: 90%;
      height: 90%;
    }
  }
}

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
  border-top: 1px solid #aac7ed;
  border-bottom: 1px solid #aac7ed;
  
  &.main {
    background-color: #1476f2;
  }
  &.inner {
    background-color: #fff;
    border-color: #fff;
    &:before,
    &:after {
      border-color: #fff;
    }
  }
  
  &.main {
    border: none;
    &:before,
    &:after {
      border: none;
    }
  }
  
  &:before {
    position: absolute;
    top: 0;
    right: calc((100% / 2) - ((100% * 0.57735) / 2));
    background-color: inherit;
    height: inherit;
    width: inherit;
    content: '';
    transform: rotateZ(60deg);
    border-top: 1px solid #aac7ed;
    border-bottom: 1px solid #aac7ed;
  }
  
  &:after {
    position: absolute;
    top: 0;
    right: calc((100% / 2) - ((100% * 0.57735) / 2));
    background-color: inherit;
    height: inherit;
    width: inherit;
    content: '';
    transform: rotateZ(-60deg);
  ...