https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Shape & Color Generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(circle, #1e1e1e, #2d2d2d, #3b3b3b, #444444);
cursor: pointer;
}
.shape {
position: absolute;
transform: translate(-50%, -50%);
animation: popIn 0.6s ease;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}
@keyframes popIn {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@keyframes neonBackground {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
</head>
<body>
<script>
document.body.addEventListener('click', function (e) {
const shape = document.createElement('div');
const size = Math.random() * 120 + 50; // Random size between 50px and 170px
const colors = [
'#FF007C', '#00F5D4', '#FAFF00', '#FF5D73', '#08F7FE',
'#9B5DE5', '#F15BB5', '#FEE440', '#00BBF9', '#00F5D4'
];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
const shapes = ['50%', '0%', 'polygon(50% 0%, 0% 100%, 100% 100%)']; // Circle, Square, Triangle
shape.style.width = `${size}px`;
shape.style.height = `${size}px`;
shape.style.background = `linear-gradient(145deg, ${randomColor}, #000)`;
shape.style.borderRadius = shapes[Math.floor(Math.random() * shapes.length)];
shape.style.left = `${e.clientX}px`;
shape.style.top = `${e.clientY}px`;
shape.style.boxShadow = `0 0 20px ${randomColor}, 0 0 40px ${randomColor}, 0 0 80px ${randomColor}`;
shape.classList.add('shape');
document.body.appendChild(shape);
setTimeout(() => {
shape.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
shape.style.transform = 'translate(-50%, -50%) scale(0)';
shape.style.opacity = '0';
}, 1000);
setTimeout(() => {
shape.remove();
}, 1500);
});
</script>
</body>
</html>
Top comments (0)