@property --a {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
html,
body,
div {
    display: grid;
}

html {
    height: 100%;
}

body {
    overflow: hidden;
    perspective: 35em;
    background: #000;
}

svg[width="0"][height="0"] {
    position: fixed;
}

div {
    transform-style: preserve-3d;
}

.a3d {
    grid-template: repeat(var(--n), 1.5em) / repeat(var(--n), 1.5em);
    place-self: center;
    transform: rotatex(55deg) rotate(1turn);
    /* assembly rotation animation */
    -webkit-animation: r 16s linear infinite;
    animation: r 16s linear infinite;
}

@-webkit-keyframes r {
    to {
        transform: rotatex(55deg);
    }
}

@keyframes r {
    to {
        transform: rotatex(55deg);
    }
}
.cell {
    /* rainbow grid, each cell depending on its indices */
    color: hsl(calc((var(--i) + var(--j)) / var(--n) * 180), 100%, 65%);
    /* 2 pseudos, one for each triangle of square cell */
    /* switch parity bit */
}
.cell::before,
.cell::after {
    --p: 0;
    /* parity bit */
    --s: calc(1 - 2 * var(--p));
    /* square grid node index along x axis (depends on parity) */
    --pi: calc(var(--i) + var(--p));
    /* square grid node index along y axis (depends on parity) */
    --pj: calc(var(--j) + var(--p));
    /* function value at current node */
    --k: calc(
        1.5 * sin(var(--pi) / var(--n) * 1.5turn + var(--a)) + 2.5 *
            cos(var(--pj) / var(--n) * 1turn + var(--a))
    );
    /* f values at adjacent nodes at ends of grid cell diagonal */
    --ki: calc(
        1.5 * sin(calc(var(--pi) + var(--s)) / var(--n) * 1.5turn + var(--a)) +
            2.5 * cos(var(--pj) / var(--n) * 1turn + var(--a))
    );
    --kj: calc(
        1.5 * sin(var(--pi) / var(--n) * 1.5turn + var(--a)) + 2.5 *
            cos(calc(var(--pj) + var(--s)) / var(--n) * 1turn + var(--a))
    );
    grid-area: 1/1;
    transform-origin: calc(var(--p) * 100%) calc(var(--p) * 100%);
    transform: translatez(calc(var(--k) * 1.5em))
        matrix3d(
            1,
            0,
            calc(var(--s) * (var(--ki) + -1 * var(--k))),
            0,
            0,
            1,
            calc(var(--s) * (var(--kj) + -1 * var(--k))),
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1
        );
    background: linear-gradient(
        calc(45deg - var(--s) * 90deg),
        currentcolor 50%,
        transparent 0
    );
    /* create gaps & rounded corners */
    filter: url(#outline);
    /* wave motion in time animation */
    -webkit-animation: a 2s linear infinite;
    animation: a 2s linear infinite;
    content: "";
}
.cell::after {
    --p: 1;
}

@-webkit-keyframes a {
    to {
        --a: 1turn;
    }
}

@keyframes a {
    to {
        --a: 1turn;
    }
}