hidden light squares

by trentHarlem

HTML

<html lang="en" class="burn">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>folding_squares</title>
    <!--  -->
  
  </head>

  <body>
    <div class="assembly">
      <div class="square" style="--i: 3"></div>
      <div class="square" style="--i: 2"></div>
      <div class="square" style="--i: 1"></div>
      <div class="square" style="--i: 0"></div>
    </div>

    <script>

    </script>
  </body>

</html>

CSS

/* css design based on Ana Tudor's amazing work! https://codepen.io/thebabydino/  */

/* variables for square colors */
:root {
  --bg-color: #131313;
  --center-color: black;
  /* --corner-color: var(--bg-color); */
  --rotate-color: #131313;
  --skew-color: whitesmoke;
}

/* skew angle */
@property --sxa {
  syntax: '<angle>';
  initial-value: -90deg;
  inherits: true;
}

html,
body,
div {
  display: grid;
}

html {
  height: 100%;
}

body {
  background: var(--bg-color);

  /* Lotus */
/* background: radial-gradient(#85a29e, #b22148); */
}

/* contrast effect */
.burn {
  filter: contrast(1);
}

/* stack all items in assembly one on top of the other */
div,
::before,
::after {
  grid-area: 1/1;
}

.assembly {
  /* center square */
  place-self: center;
  background: var(--center-color);
}

.square {
  /* corner squares move on a circular arc with no rotation */
  --sxa: -90deg;
  /* skew angle of blurred squares */
  --syf: cos(var(--sxa));
  /* scaling factor along other axis (not skew one) */
  --rza: calc(-90deg - var(--sxa));
  /* rotation angle */
  transform: rotate(calc(var(--i) * 90deg)) translatey(-100%) rotate(var(--rza)) translate(100%) rotate(calc(-1 * var(--rza)));
  /* reverse cancel out self rotation */
  background: transparent;
  
/*   background: var(--rotate-color); */
  animation: sxa 9s ease-in-out infinite;
  -webkit-animation: sxa 9s ease-in-out infinite;
  /* -moz-animation: sxa 9s ease-in-out infinite; */
 
  /* animate skew angle rotation depends on */
  /* switch j value to 1 on ::after */
}

.square::before,
.square::after {
  /* switch variable between pseudos; 0 for ::before, 1 for ::after */
  /* see https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ */
  --j: 0;
  /* complementary (negation) */
  /* see https://css-tricks.com/logical-operations-with-css-variables/ */
  --k: calc(1 - var(--j));
  /* percentage value */
  --o: calc(var(--k) * 100%);
  padding: 8vmin;
  /* set padding to...

JavaScript

let n = 4
      const assembly = document.querySelector('.assembly')
      while (n--) {
        const square = document.createElement('div')
        square.classList.add('square')
        square.style.setProperty('--i', n)
        assembly.appendChild(square)
      }