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

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.wrapper{
  width: 300px;
  height: 300px;

  .el{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

    .item{
      width: 18px;
      height: 18px;
      margin: 1px;
      background-color:#f5f5f5;

      &.even{
        background-color: #dfdfdf;
      }
    }
  }
}

const el = document.querySelector('.el');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 225; i++) {
  let el_item = document.createElement('div');
  el_item.classList.add('item');

  if (i % 2) {
    el_item.classList.add('even');
  } else {
    el_item.classList.add('is-anime');
  }

  fragment.appendChild(el_item);
}

el.appendChild(fragment);

anime({
  targets: '.item',
  rotate: {
    value: '1turn', duration: 790
  },
  scale: [
    {
      value: .1,
      easing: 'easeOutSine',
      duration: 500
    },
    {
      value: 1,
      easing: 'easeInOutQuad',
      duration: 1200
    }
  ],
  loop: true,
  delay: anime.stagger(200, {grid: [15, 15], from: 'center'})
});