.hexagon_wrapper {
    width:70vmin;
    height:70vmin;
    position:relative;
    margin:200px auto;
}

.hexagon {
    /*
      |a|d|a|
      -------  -
      |/   \|  | 0.5h
      |\   /|  ^
      -------
      |  w  |

      a = 0.5h/tan60 = 0.28867513459h
      d = 0.5h/sin60 = 0.57735026919h
      w = a + d + a  = 1.15470053838h

      [zoom out]

          |a|_d_|         _____    _
          /|     \       /     \   |
  ang=60_/        \__d__/       \  | h
         \        /     \       /  |
          \_____|/|      \_____/  _|
                a
         |--------|
             w
    */
    --h: calc(100% / 3);
    --w: calc(1.15470053838 * var(--h));
    --a: calc(0.28867513459 * var(--h));
    --d: calc(0.57735026919 * var(--h));
    height:var(--h);
    width:var(--w);
    position:absolute;
    cursor: pointer;
}

img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    /*

     [clip-path coordinates]

      --A-F--
     B|/   \|E    coord.
      |\   /|       A(a/w, 0)
      --C-D--       B(0, 50%)
                    C(a/w, 100%)
                    D(100% - a/w, 100%)
                    E(100%, 50%)
                    F(100% - a/w, 0)
                  where a/w = 0.24999999999
    */
    --aw:24.99999999999%;
    clip-path:polygon(
            var(--aw) 0,
            0 50%,
            var(--aw) 100%,
            calc(100% - var(--aw)) 100%,
            100% 50%,
            calc(100% - var(--aw)) 0
    );
}

.hexagon:nth-of-type(1) {
    left:calc(50% - var(--a) - var(--d) * 0.5);
    top:0;
}
.hexagon:nth-of-type(2) {
    left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
    top:calc(var(--h) * 0.5);
}
.hexagon:nth-of-type(3) {
    left:calc(50% - var(--a) * 2 - var(--d) * 1.5);
    top:calc(var(--h) * 1.5);
}
.hexagon:nth-of-type(4) {
    left:calc(50% - var(--a) - var(--d) * 0.5);
    top:calc(var(--h) * 2);
}
.hexagon:nth-of-type(5) {
    left:calc(50% + var(--d) * 0.5);
    top:calc(var(--h) * 0.5);
}
.hexagon:nth-of-type(6) {
    left:calc(50% + var(--d) * 0.5);
    top:calc(var(--h) * 1.5);
}



/*
style
*/

.hexagon_wrapper {
    filter:drop-shadow(0 0 10px hsla(0,0%,0%,0.3));
}

.hexagon:before {
    position: absolute;
    width: 0;
    bottom: 25%;
    left: -74%;
    right: 0;
    content: '';
    height: 4px;
    background-color: #ffe6ff;
    box-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #a99eff, -0.2rem 0.1rem 1rem #7b76c1, 0.2rem 0.1rem 1rem #959dd8, 0 -0.5rem 2rem #6e62b5, 0 0.5rem 3rem #dfdee8;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    transform: rotate(60deg);
    z-index: 1;
    transition:0.3s;
}
.hexagon:after {
    position: absolute;
    width: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    height: 4px;
    background-color: #ffe6ff;
    box-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #a99eff, -0.2rem 0.1rem 1rem #7b76c1, 0.2rem 0.1rem 1rem #959dd8, 0 -0.5rem 2rem #6e62b5, 0 0.5rem 3rem #dfdee8;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    z-index: 2;
    transition:0.3s;
}

.hexagon:hover:before, .hexagon:hover:after, .hexagon.active:before, .hexagon.active:after {
    width:50%;
}

/*
anim
*/

.hexagon_wrapper {
    animation:r 4s forwards;
} @keyframes r {
      from {transform:rotate(180deg)}
      to {transform:rotate(0)}
  }

.hexagon {
    animation:ir 4s forwards;
} @keyframes ir {
      from {transform:rotate(-360deg)}
      to {transform:rotate(0)}
  }