html {

    width: 100%;

    height: 100%;

    background: #000;

}

body {

    width: 100%;

    height: 100%;

    cursor: pointer;

    transform-style: preserve-3d;

    perspective: 400px;

    overflow: hidden;

    cursor: pointer;

}

​

:root {

  --s: 20vw;  /* size  */

  --m: 1px;    /* margin */

  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);

}

​

.wrap {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translate3d(-50%, -2000px, 900px) rotateX(38deg);

    transform-origin: 50% bottom;

    width: 600%;

    height: 600%;

    top: 0;

    font-size: 0;

    transform-style: preserve-3d;

​

    &::before {

        content: "";

        height: 100%;

        width: calc((var(--s) / 2) + calc(var(--m) / 2));

        shape-outside: repeating-linear-gradient(

            transparent 0,

            transparent calc(var(--s) * 1.5),

            #000 calc(var(--s) * 1.5),

            #000 var(--f)

        );

        float: left;

    }

    &::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);

        z-index: 1;

        animation: change 5s infinite linear;

    }

}

​

li {

    position: relative;

    width: var(--s);

    height: calc(var(--s) * 1.1547); 

    background: #000;

    flex: 0 0 auto;

    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);

    margin: var(--m);

    margin-bottom: calc(var(--m) - var(--s) * 0.2885); 

    display: inline-block;

    z-index: 2;

    &:hover {

        background: transparent;

    }

}

​

@keyframes change {

    100% {

        filter: hue-rotate(360deg);

    }

}

// const mouseOverContainer = document.getElementsByTagName("body")[0];

// const element = document.getElementById("container");

// const { clientWidth, clientHeight } = document.body;

// const oneTenthWidth = clientWidth / 10;

// const oneTenthHeight = clientHeight / 10;

// function transformElement(x, y) {

//     element.setAttribute('style', `--x: ${x + oneTenthWidth}px;--y:${y + oneTenthHeight}px`);

// }

​

// mouseOverContainer.addEventListener("mousemove", (e) => {

//     window.requestAnimationFrame(function () {

//         transformElement(e.clientX, e.clientY);

//     });

// });

​

// mouseOverContainer.addEventListener('mouseleave', (e) => {

//   window.requestAnimationFrame(function(){

//     element.setAttribute('style', `--x: 50%; --y:50%`);

//   });

// });

​