JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="main">
  <svg>
    <filter id="disp">
      <feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="1" />
      <feDisplacementMap in="SourceGraphic" scale="200" />
    </filter>
  </svg>

  <div class="doodle">
    <div class="container">
      <div id="cell-1-1-1"></div>
      <div id="cell-2-1-1"></div>
      <div id="cell-3-1-1"></div>
      <div id="cell-4-1-1"></div>
      <div id="cell-5-1-1"></div>
      <div id="cell-6-1-1"></div>
      <div id="cell-7-1-1"></div>
      <div id="cell-8-1-1"></div>
      <div id="cell-9-1-1"></div>
      <div id="cell-10-1-1"></div>
      <div id="cell-11-1-1"></div>
      <div id="cell-12-1-1"></div>
      <div id="cell-13-1-1"></div>
      <div id="cell-14-1-1"></div>
      <div id="cell-15-1-1"></div>
      <div id="cell-16-1-1"></div>
      <div id="cell-17-1-1"></div>
      <div id="cell-18-1-1"></div>
      <div id="cell-19-1-1"></div>
      <div id="cell-20-1-1"></div>
      <div id="cell-21-1-1"></div>
      <div id="cell-22-1-1"></div>
      <div id="cell-23-1-1"></div>
      <div id="cell-24-1-1"></div>
      <div id="cell-25-1-1"></div>
      <div id="cell-26-1-1"></div>
      <div id="cell-27-1-1"></div>
      <div id="cell-28-1-1"></div>
      <div id="cell-29-1-1"></div>
      <div id="cell-30-1-1"></div>
      <div id="cell-31-1-1"></div>
      <div id="cell-32-1-1"></div>
      <div id="cell-33-1-1"></div>
      <div id="cell-34-1-1"></div>
      <div id="cell-35-1-1"></div>
      <div id="cell-36-1-1"></div>
      <div id="cell-37-1-1"></div>
      <div id="cell-38-1-1"></div>
      <div id="cell-39-1-1"></div>
      <div id="cell-40-1-1"></div>
      <div id="cell-41-1-1"></div>
      <div id="cell-42-1-1"></div>
      <div id="cell-43-1-1"></div>
      <div id="cell-44-1-1"></div>
      <div id="cell-45-1-1"></div>
      <div id="cell-46-1-1"></div>
      <div id="cell-47-1-1"></div>
      <div id="cell-48-1-1"></div>
      <div id="cell-49-1-1"></div>
      <div...

CSS

.main{
  background-color: #333;
  width: 100vw;
  height: 100vh;
}

.mask {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
}

.main>svg {
  display: none;
}

/*

*/
@keyframes r {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

.doodle {
  grid-template-rows: repeat(50, 1fr);
  grid-template-columns: repeat(1, 1fr);
}

.doodle {
  width: 100vw;
  height: 100vh;

  position: relative;

  top: 50px;
  left: 50px;


  filter: url('#disp');

  background: var(cyan);
  overflow: hidden;
}

.container {
  -webkit-animation: r 20s linear infinite;
  animation: r 20s linear infinite;
  top: 100px;
  left: 20px;
}

#cell-1-1-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--internal-cell-width, 25%);
  height: var(--internal-cell-height, 25%);
  margin-left: calc(var(--internal-cell-width, 25%) / -2) !important;
  margin-top: calc(var(--internal-cell-height, 25%) / -2) !important;
  grid-area: unset !important;

  width: 100%;
  height: 2vmin;
  --internal-cell-width: 100%;
  --internal-cell-height: 2vmin;
  background: var(--man-secondary-green);
  -webkit-transform-origin: 1vmin center;
  transform-origin: 1vmin center;
  -webkit-transform: translateX(50%) rotate(calc(1 * 360deg / 50));
  transform: translateX(50%) rotate(calc(1 * 360deg / 50));
}

#cell-2-1-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--internal-cell-width, 25%);
  height: var(--internal-cell-height, 25%);
  margin-left: calc(var(--internal-cell-width, 25%) / -2) !important;
  margin-top: calc(var(--internal-cell-height, 25%) / -2) !important;
  grid-area: unset !important;

  width: 100%;
  height: 2vmin;
  --internal-cell-width: 100%;
  --internal-cell-height: 2vmin;
  background: var(--man-secondary-orange);
  -webkit-transform-origin: 1vmin center;
  transform-origin: 1vmin center;
  -webkit-transform: translateX(50%) rotate(calc(2 * 360deg / 50));
  transform: translateX(50%) rotate(calc(2 * 360deg /...