게슈탈트: 근접성

<div class="grid" id="grid"></div>

.grid{position:relative;width:88%;height:80%}
.dot{position:absolute;width:11%;aspect-ratio:1;max-width:20px;border-radius:50%;background:var(--accent);transition:left 1.2s cubic-bezier(.4,0,.2,1),top 1.2s cubic-bezier(.4,0,.2,1)}

const grid = document.getElementById('grid');
const N = 6;
const even = [];
for (let i = 0; i < N; i++) even.push({ x: 8 + (i % 3) * 38, y: 10 + Math.floor(i / 3) * 55 });
const grouped = [
  { x: 6, y: 10 }, { x: 20, y: 14 },
  { x: 44, y: 8 }, { x: 58, y: 12 },
  { x: 6, y: 62 }, { x: 20, y: 66 },
];
const dots = even.map(p => {
  const d = document.createElement('div');
  d.className = 'dot';
  d.style.left = p.x + '%';
  d.style.top = p.y + '%';
  grid.appendChild(d);
  return d;
});
let grouped_ = true;
function apply(layout) { dots.forEach((d, i) => { d.style.left = layout[i].x + '%'; d.style.top = layout[i].y + '%'; }); }
setInterval(() => { grouped_ = !grouped_; apply(grouped_ ? grouped : even); }, 2000);