DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Prince
Prince

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body><br>
<div class="container"><br>
<div class="illusion-container" id="illusion"><br>
&lt;!-- Rings and dots will be generated by JavaScript --&gt;<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>&lt;script&gt;
// 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);
Enter fullscreen mode Exit fullscreen mode

&lt;/script&gt;
</code></pre></div>
<p></body><br>
</html>`</p>

Top comments (0)