Skip to content

DEV Community

0 seconds of 0 secondsVolume 90%

00:00

00:00

00:00

Prince

Posted on Mar 23

1

Hyponitic illusion using the core javascript.

#webdev #programming #javascript #beginners

`<!DOCTYPE html>

Hypnotic Illusion Pattern

<br>
body {<br>
margin: 0;<br>
padding: 0;<br>
overflow: hidden;<br>
background-color: #000;<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
height: 100vh;<br>
font-family: sans-serif;<br>
perspective: 800px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> .container {
position: relative;
width: 100vmin;
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.illusion-container {
    position: relative;
    width: 80vmin;
    height: 80vmin;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid transparent;
    transform-style: preserve-3d;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.7) 70%);
    pointer-events: none;
    z-index: 10;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg) rotateX(60deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(60deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

.info-text {
    position: absolute;
    bottom: 20px;
    color: white;
    text-align: center;
    font-size: 16px;
    z-index: 20;
    opacity: 0.8;
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="container"><br>
<div class="illusion-container" id="illusion"><br>
<br>
</div><br>
</div><br>
<div class="overlay"></div><br>
<div class="info-text"><br>
Follow for more amazing coding illusions<br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code><script>
// Configuration
const numRings = 15;
const dotsPerRing = 20;
const minRadius = 40;
const maxRadius = Math.min(window.innerWidth, window.innerHeight) * 0.4;

// Color arrays
const colors = [
    '#FF00FF', // Magenta
    '#00FFFF', // Cyan
    '#FFFF00', // Yellow
    '#FF0000', // Red
    '#00FF00', // Green
    '#0000FF'  // Blue
];

const container = document.getElementById('illusion');

// Create rings and dots
for (let i = 0; i &amp;lt; numRings; i++) {
    // Calculate radius based on position
    const radiusPercent = i / (numRings - 1);
    const radius = minRadius + radiusPercent * (maxRadius - minRadius);

    // Create ring element
    const ring = document.createElement('div');
    ring.className = 'ring';
    ring.style.width = `${radius * 2}px`;
    ring.style.height = `${radius * 2}px`;
    ring.style.marginLeft = `-${radius}px`;
    ring.style.marginTop = `-${radius}px`;

    // Additional 3D transform for depth effect
    const zOffset = -300 + (i * 600 / numRings);
    ring.style.transform = `translateZ(${zOffset}px)`;

    // Create dots around this ring
    for (let j = 0; j &amp;lt; dotsPerRing; j++) {
        const angle = (j / dotsPerRing) * Math.PI * 2;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;

        const dot = document.createElement('div');
        dot.className = 'dot';

        // Calculate position
        dot.style.left = `${x}px`;
        dot.style.top = `${y}px`;

        // Select color
        const colorIndex = (i + j) % colors.length;
        dot.style.backgroundColor = colors[colorIndex];
        dot.style.boxShadow = `0 0 8px 2px ${colors[colorIndex]}`;

        // Add animation with delay
        const delay = (i * dotsPerRing + j) * 0.05;
        dot.style.animation = `pulse 3s ease-in-out ${delay}s infinite`;

        // Add dots to the ring
        ring.appendChild(dot);
    }

    // Add ring to container
    container.appendChild(ring);
}

// Interactive movement
document.addEventListener('mousemove', (e) =&amp;gt; {
    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

// Touch support for mobile
document.addEventListener('touchmove', (e) =&amp;gt; {
    if (e.touches.length &amp;gt; 0) {
        const touch = e.touches[0];
        const xAxis = (window.innerWidth / 2 - touch.pageX) / 25;
        const yAxis = (window.innerHeight / 2 - touch.pageY) / 25;
        container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
        e.preventDefault();
    }
}, { passive: false });

// Random color changes
setInterval(() =&amp;gt; {
    const dots = document.querySelectorAll('.dot');
    dots.forEach(dot =&amp;gt; {
        if (Math.random() &amp;gt; 0.98) {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            dot.style.backgroundColor = randomColor;
            dot.style.boxShadow = `0 0 8px 2px ${randomColor}`;
        }
    });
}, 100);

</script>
</code></pre></div>
<p></body><br>
</html>`</p>

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Top comments (0)

Subscribe

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.