Magnetic Lines
Home
Snippets
Magnetic Lines
HTML
CSS
JS
<div></div>
body { display: grid; place-items: center; height: 100vh; margin: 0; background: #232323; } div { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 80vmin; height: 80vmin; } span { --rotate: -10deg; display: block; width: 1vmin; height: 6vmin; background-color: #efefef; will-change: transform; transform: rotate(var(--rotate)); }
const wrapper = document.querySelector('div'); for (let i = 0; i < 81; i++) { const span = document.createElement('span'); wrapper.appendChild(span); } const items = wrapper.querySelectorAll('span'); const onPointerMove = (pointer) => { items.forEach(item => { const rect = item.getBoundingClientRect(); const x = rect.x + (rect.width / 2); const y = rect.y + (rect.height / 2); const b = pointer.x - x; const a = pointer.y - y; const c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); const r = (Math.acos(b / c) * 180 / Math.PI) * (pointer.y > y ? 1 : -1); item.style.setProperty('--rotate', `${r}deg`); }); }; window.addEventListener('pointermove', onPointerMove); onPointerMove(wrapper.getBoundingClientRect());
Ad #1
Ad #2
Scroll to Top