<div class="wrapper"></div>

html,

body {

  margin: 0;

  padding: 0;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: flex-start;

}

​

.wrapper {

  overflow: hidden;

  gap: 0;

  position: relative;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  align-items: start;

  grid-auto-rows: 100px;

  max-width: calc(100vw - 20vh);

  height: 80vh;

  background-color: rgb(2, 41, 30);

  padding: 20px;

  margin: 10vh;

  box-sizing: border-box;

  border-radius: 10px;

}

​

.wrapper:after {

  content: "";

  background: linear-gradient(

    0deg,

    rgba(2, 41, 30, 1) 0%,

    rgba(2, 41, 30, 0) 100%

  );

  bottom: 0;

  height: 40px;

  width: 100%;

  position: absolute;

  z-index: 1;

}

​

.inner {

  background: url(https://assets.codepen.io/9367036/shippo.svg?v=3) no-repeat

    scroll center center transparent;

  background-size: cover;

  aspect-ratio: 1 / 1;

  opacity: 0;

}

​

const _0x23e826 = _0x53da;

(function (_0x530097, _0x38035d) {

  const _0x3a88d4 = _0x53da,

    _0x3bb355 = _0x530097();

  while (!![]) {

    try {

      const _0x8d457 =

        (-parseInt(_0x3a88d4(0x1c6)) / 0x1) *

          (parseInt(_0x3a88d4(0x1c9)) / 0x2) +

        -parseInt(_0x3a88d4(0x1ce)) / 0x3 +

        parseInt(_0x3a88d4(0x1c7)) / 0x4 +

        parseInt(_0x3a88d4(0x1d3)) / 0x5 +

        (parseInt(_0x3a88d4(0x1d0)) / 0x6) *

          (-parseInt(_0x3a88d4(0x1d5)) / 0x7) +

        -parseInt(_0x3a88d4(0x1cb)) / 0x8 +

        (parseInt(_0x3a88d4(0x1cd)) / 0x9) * (parseInt(_0x3a88d4(0x1cc)) / 0xa);

      if (_0x8d457 === _0x38035d) break;

      else _0x3bb355["push"](_0x3bb355["shift"]());

    } catch (_0x400a2a) {

      _0x3bb355["push"](_0x3bb355["shift"]());

    }

  }

})(_0x21fd, 0xbb7f9);

const wrapper = document[_0x23e826(0x1d4)](".wrapper"),

  numberOfElements = 0x64;

function _0x53da(_0x36851e, _0xb95af5) {

  const _0x21fdad = _0x21fd();

  return (

    (_0x53da = function (_0x53da5c, _0x574d79) {

      _0x53da5c = _0x53da5c - 0x1c6;

      let _0x47fd5c = _0x21fdad[_0x53da5c];

      return _0x47fd5c;

    }),

    _0x53da(_0x36851e, _0xb95af5)

  );

}

for (let i = 0x0; i < numberOfElements; i++) {

  const inner = document[_0x23e826(0x1cf)](_0x23e826(0x1d2));

  inner[_0x23e826(0x1d6)]["add"](_0x23e826(0x1ca)),

    wrapper["appendChild"](inner);

}

gsap["to"](_0x23e826(0x1d1), {

  opacity: 0x1,

  duration: 0x1,

  rotation: 0x5a,

  stagger: { each: 0.1, ease: _0x23e826(0x1c8) }

});

function _0x21fd() {

  const _0x1e818d = [

    ".inner",

    "div",

    "6012895JYFLEB",

    "querySelector",

    "966wiNGQv",

    "classList",

    "485LtbLtd",

    "5814844Ijjygh",

    "expo.out",

    "1226zcNCRg",

    "inner",

    "7632400EoGtwc",

    "10819790ClrgjE",

    "9zAcnaI",

    "2873553BwkiuK",

    "createElement",

    "33090JudvvM"

  ];

  _0x21fd = function () {

    return _0x1e818d;

  };

  return _0x21fd();

}

​