<body>
<div class="geometric-background" id="geometric-background"></div>
<div class="particles" id="particles"></div>
<div class="gradient-overlay"></div>
<div class="container">
<div class="content">
<h1>Geometric Animation</h1>
<p>This background features animated geometric shapes with a vibrant color palette against a dark backdrop. The animation combines rotating, pulsing, and floating elements with subtle particle effects.</p>
</div>
</div>
</body> body {
margin: 0;
padding: 0;
overflow: hidden;
background: #1a1a2e;
height: 100vh;
font-family: 'Arial', sans-serif;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
z-index: 10;
}
.content {
color: white;
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
max-width: 600px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 3em;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
line-height: 1.6;
}
.geometric-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.shape {
position: absolute;
opacity: 0.2;
transform-origin: center;
}
.square {
width: 40px;
height: 40px;
background: #f72585;
animation: rotate 20s infinite linear;
}
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: #4cc9f0;
animation: pulse 15s infinite alternate;
}
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #7209b7;
animation: float 12s infinite ease-in-out;
}
.rectangle {
width: 80px;
height: 30px;
background: #4361ee;
animation: slide 18s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.1;
}
50% {
transform: scale(1.5);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 0.1;
}
}
@keyframes float {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) translateX(20px) rotate(180deg);
}
100% {
transform: translateY(0px) translateX(0px) rotate(360deg);
}
}
@keyframes slide {
0% {
transform: translateX(-100px) rotate(0deg);
}
50% {
transform: translateX(100px) rotate(180deg);
}
100% {
transform: translateX(-100px) rotate(360deg);
}
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
opacity: 0.5;
animation: sparkle 8s infinite linear;
}
@keyframes sparkle {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 0%, #1a1a2e 80%);
z-index: 5;
animation: pulse-overlay 10s infinite alternate;
}
@keyframes pulse-overlay {
0% {
opacity: 0.8;
}
100% {
opacity: 1;
}
} // Create geometric shapes
function createShapes() {
const background = document.getElementById('geometric-background');
const shapeTypes = ['square', 'circle', 'triangle', 'rectangle'];
for (let i = 0; i < 40; i++) {
const shape = document.createElement('div');
const shapeClass = shapeTypes[Math.floor(Math.random() * shapeTypes.length)];
shape.className = `shape ${shapeClass}`;
// Random positions
const posX = Math.random() * 100;
const posY = Math.random() * 100;
// Random animation properties
const delay = Math.random() * 10;
const duration = Math.random() * 10 + 10;
// Apply styles
shape.style.left = `${posX}%`;
shape.style.top = `${posY}%`;
shape.style.animationDelay = `${delay}s`;
shape.style.animationDuration = `${duration}s`;
background.appendChild(shape);
}
}
// Create particles
function createParticles() {
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 100; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random positions
const posX = Math.random() * 100;
const posY = Math.random() * 100;
// Random animation properties
const delay = Math.random() * 8;
const duration = Math.random() * 4 + 4;
// Apply styles
particle.style.left = `${posX}%`;
particle.style.top = `${posY}%`;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;
particlesContainer.appendChild(particle);
}
}
// Mouse movement interaction
function addMouseInteraction() {
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
const shapes = document.querySelectorAll('.shape');
shapes.forEach(shape => {
const speed = 0.05;
const shapeX = parseFloat(shape.style.left);
const shapeY = parseFloat(shape.style.top);
shape.style.left = `${shapeX + (x - 0.5) * speed}%`;
shape.style.top = `${shapeY + (y - 0.5) * speed}%`;
});
});
}
// Initialize animation
document.addEventListener('DOMContentLoaded', () => {
createShapes();
createParticles();
addMouseInteraction();
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.