.custom-grid#js-grid
    .item
        .text Lorem ipsum dolor sit amet
    .item
        .text Lorem ipsum dolor sit amet
    .item
        .text Lorem ipsum dolor sit amet
    .item
        .text Lorem ipsum dolor sit amet
    .item
        .text Lorem ipsum dolor sit amet
    .item
        .text Lorem ipsum dolor sit amet
    .shadow

@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Sawarabi Mincho', sans-serif;
}

body {
    background: #302015;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23BA8E59' fill-opacity='.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    overflow: hidden;
}

.custom-grid {
    position: relative;
    max-width: 50rem;
    margin: 2rem auto;
    text-align: center;
    
    > .item {
        display: inline-block;
        margin: .4rem .2rem;
        border: 2px solid #BA8E59;
    }
    
    > .item > .text {
        position: relative;
        z-index: 1;
        color: #eee;
        padding: 1rem;
    }
    
    > .shadow {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200vh;
        width: 200vw;
        transform: translateX(-50%) translateY(-50%);
        background: radial-gradient(circle at center, transparent 0%, transparent 5%, #302015 70%, #302015 100%);
    }
}

const grid   = document.getElementById('js-grid');
const shadow = grid.querySelector('.shadow');

document.addEventListener('mousemove', (e) => {
    const rect = grid.getBoundingClientRect();

    window.requestAnimationFrame(() => {
        shadow.style.left = `${e.clientX - rect.left}px`;
        shadow.style.top = `${e.clientY - rect.top}px`;
    });
});