<div id="root"></div>
<a class='anck' href='https://twitter.com/anoChick' target="_blank" rel="noopener noreferrer">
  <svg width="43" height="16" viewBox="0 0 43 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.74602 7.15069C5.81489 7.15069 7.49204 5.54995 7.49204 3.57534C7.49204 1.60074 5.81489 0 3.74602 0C1.67715 0 0 1.60074 0 3.57534C0 5.54995 1.67715 7.15069 3.74602 7.15069Z" fill="white" />
    <path d="M39.254 7.15069C41.3228 7.15069 43 5.54995 43 3.57534C43 1.60074 41.3228 0 39.254 0C37.1851 0 35.5079 1.60074 35.5079 3.57534C35.5079 5.54995 37.1851 7.15069 39.254 7.15069Z" fill="white" />
    <path d="M28.9685 11.8598C28.9685 9.35259 25.6243 7.32004 21.5 7.32004C17.3757 7.32004 14.0316 9.35259 14.0316 11.8598C14.0316 14.367 17.3757 15.0148 21.5 15.0148C25.6243 15.0148 28.9685 14.367 28.9685 11.8598Z" fill="white" />
  </svg>
</a>

.block {
  font-size: 0;
}
.cell {
  display: inline-block;
  width: 32px;
  height: 32px;
  transition-duration: 1000ms;
  transition-property: opacity;
  filter: blur(64px);
  opacity: 0;
  background: #00ff00;
}

.cell:hover {
  opacity: 1;
  transition: background-color 100ms;
}

html,
body {
  margin: 0;
  background-color: #0a0c0d;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 0.1em,
      transparent 0.1em
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0.1em, transparent 0.1em);
  background-size: 3em 3em;
  color: #fff;
}

.anck {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  line-height: 98px;
  text-align: center;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  background-color: rgba(255, 255, 255, 0);
}
.anck:hover {
  opacity: 0.5;
  background-color: rgba(255, 255, 255, 0.1);
}

.anck svg {
  width: 50%;
}

import ReactDOM from 'https://esm.sh/react-dom@18.2.0';
import React from "https://esm.sh/react@18.2.0";

const BLOCK_ARY = Array.from({ length: 100 }, (_, i) => i + 1);


function Main() {
  return <div className='block'>
            {BLOCK_ARY.map((y) => {
          return BLOCK_ARY.map((x) => {
            return <div className="cell"/>;
          });
        })}
  </div>;
}








const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Main />);