508 lines
16 KiB
HTML
508 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Abstract Design</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
overflow: hidden;
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 50%, #a7f3d0 100%);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Organic Blob Shapes */
|
||
|
|
.blob {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
filter: blur(40px);
|
||
|
|
opacity: 0.6;
|
||
|
|
animation: float 20s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-1 {
|
||
|
|
width: 500px;
|
||
|
|
height: 500px;
|
||
|
|
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||
|
|
top: -100px;
|
||
|
|
left: -100px;
|
||
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-2 {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
|
|
bottom: -50px;
|
||
|
|
right: -50px;
|
||
|
|
border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
|
||
|
|
animation-delay: -5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-3 {
|
||
|
|
width: 350px;
|
||
|
|
height: 350px;
|
||
|
|
background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
|
||
|
|
animation-delay: -10s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-4 {
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||
|
|
top: 20%;
|
||
|
|
right: 20%;
|
||
|
|
border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
|
||
|
|
animation-delay: -15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% {
|
||
|
|
transform: translate(0, 0) rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
33% {
|
||
|
|
transform: translate(30px, -50px) rotate(120deg) scale(1.1);
|
||
|
|
}
|
||
|
|
66% {
|
||
|
|
transform: translate(-20px, 30px) rotate(240deg) scale(0.9);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SVG Container for lines and geometric shapes */
|
||
|
|
.svg-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Wavy Lines */
|
||
|
|
.wavy-line {
|
||
|
|
fill: none;
|
||
|
|
stroke: white;
|
||
|
|
stroke-width: 3;
|
||
|
|
stroke-linecap: round;
|
||
|
|
opacity: 0.9;
|
||
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Nodes/Dots */
|
||
|
|
.node {
|
||
|
|
fill: white;
|
||
|
|
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
|
||
|
|
animation: pulse 3s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||
|
|
50% { opacity: 0.7; transform: scale(1.2); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Grid Patterns */
|
||
|
|
.grid-cube {
|
||
|
|
position: absolute;
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
animation: rotate3d 20s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-cube::before,
|
||
|
|
.grid-cube::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-cube::before {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transform: rotateX(60deg) rotateY(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-cube::after {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transform: rotateX(60deg) rotateY(-45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cube-1 {
|
||
|
|
top: 10%;
|
||
|
|
left: 10%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cube-2 {
|
||
|
|
top: 60%;
|
||
|
|
left: 70%;
|
||
|
|
animation-delay: -7s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cube-3 {
|
||
|
|
top: 70%;
|
||
|
|
left: 15%;
|
||
|
|
animation-delay: -14s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate3d {
|
||
|
|
0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
|
||
|
|
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Circular Rings */
|
||
|
|
.ring {
|
||
|
|
position: absolute;
|
||
|
|
border: 3px solid rgba(255, 255, 255, 0.4);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: expand 8s infinite ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ring-1 {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
top: 30%;
|
||
|
|
left: 40%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ring-2 {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: 15%;
|
||
|
|
right: 30%;
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ring-3 {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
bottom: 40%;
|
||
|
|
right: 15%;
|
||
|
|
animation-delay: -4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes expand {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.5);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: scale(1.5);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Small decorative circles */
|
||
|
|
.small-circle {
|
||
|
|
position: absolute;
|
||
|
|
background: rgba(255, 255, 255, 0.6);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: float-small 10s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-1 {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
top: 25%;
|
||
|
|
left: 20%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-2 {
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
top: 45%;
|
||
|
|
left: 35%;
|
||
|
|
animation-delay: -3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-3 {
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
bottom: 25%;
|
||
|
|
right: 40%;
|
||
|
|
animation-delay: -6s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float-small {
|
||
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
||
|
|
25% { transform: translateY(-20px) translateX(10px); }
|
||
|
|
50% { transform: translateY(10px) translateX(-10px); }
|
||
|
|
75% { transform: translateY(-10px) translateX(5px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Grid Lines Pattern */
|
||
|
|
.grid-pattern {
|
||
|
|
position: absolute;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||
|
|
background-size: 50px 50px;
|
||
|
|
animation: grid-move 20s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-1 {
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
top: 5%;
|
||
|
|
right: 5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-2 {
|
||
|
|
width: 250px;
|
||
|
|
height: 250px;
|
||
|
|
bottom: 10%;
|
||
|
|
left: 5%;
|
||
|
|
animation-direction: reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes grid-move {
|
||
|
|
0% { transform: translate(0, 0); }
|
||
|
|
100% { transform: translate(50px, 50px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Interactive cursor effect */
|
||
|
|
.cursor-glow {
|
||
|
|
position: absolute;
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||
|
|
border-radius: 50%;
|
||
|
|
pointer-events: none;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:hover .cursor-glow {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container" id="container">
|
||
|
|
<!-- Organic Blobs -->
|
||
|
|
<div class="blob blob-1"></div>
|
||
|
|
<div class="blob blob-2"></div>
|
||
|
|
<div class="blob blob-3"></div>
|
||
|
|
<div class="blob blob-4"></div>
|
||
|
|
|
||
|
|
<!-- Grid Patterns -->
|
||
|
|
<div class="grid-pattern grid-1"></div>
|
||
|
|
<div class="grid-pattern grid-2"></div>
|
||
|
|
|
||
|
|
<!-- 3D Grid Cubes -->
|
||
|
|
<div class="grid-cube cube-1"></div>
|
||
|
|
<div class="grid-cube cube-2"></div>
|
||
|
|
<div class="grid-cube cube-3"></div>
|
||
|
|
|
||
|
|
<!-- Expanding Rings -->
|
||
|
|
<div class="ring ring-1"></div>
|
||
|
|
<div class="ring ring-2"></div>
|
||
|
|
<div class="ring ring-3"></div>
|
||
|
|
|
||
|
|
<!-- Small Floating Circles -->
|
||
|
|
<div class="small-circle circle-1"></div>
|
||
|
|
<div class="small-circle circle-2"></div>
|
||
|
|
<div class="small-circle circle-3"></div>
|
||
|
|
|
||
|
|
<!-- SVG for wavy lines and connections -->
|
||
|
|
<svg class="svg-container" id="svgContainer" preserveAspectRatio="xMidYMid slice">
|
||
|
|
<defs>
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
<!-- Paths will be generated by JavaScript -->
|
||
|
|
<g id="pathsGroup"></g>
|
||
|
|
<g id="nodesGroup"></g>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<!-- Cursor Glow Effect -->
|
||
|
|
<div class="cursor-glow" id="cursorGlow"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Configuration for wavy lines and nodes
|
||
|
|
const config = {
|
||
|
|
numPaths: 5,
|
||
|
|
nodeRadius: 8,
|
||
|
|
pathColor: '#ffffff',
|
||
|
|
pathWidth: 3
|
||
|
|
};
|
||
|
|
|
||
|
|
// Generate random control points for bezier curves
|
||
|
|
function generateWavyPath(startX, startY, endX, endY, numControlPoints = 3) {
|
||
|
|
let pathData = `M ${startX} ${startY}`;
|
||
|
|
const segmentLength = (endX - startX) / numControlPoints;
|
||
|
|
|
||
|
|
for (let i = 0; i < numControlPoints; i++) {
|
||
|
|
const cp1x = startX + (i * segmentLength) + (segmentLength / 3);
|
||
|
|
const cp1y = startY + Math.sin(i * 2) * 100 + Math.random() * 50;
|
||
|
|
const cp2x = startX + (i * segmentLength) + (2 * segmentLength / 3);
|
||
|
|
const cp2y = startY + Math.sin((i + 1) * 2) * 100 + Math.random() * 50;
|
||
|
|
const endX_point = startX + (i + 1) * segmentLength;
|
||
|
|
const endY_point = i === numControlPoints - 1 ? endY : startY + Math.sin((i + 1) * 2) * 80;
|
||
|
|
|
||
|
|
pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX_point} ${endY_point}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return pathData;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Create paths and nodes
|
||
|
|
function createPathsAndNodes() {
|
||
|
|
const container = document.getElementById('container');
|
||
|
|
const pathsGroup = document.getElementById('pathsGroup');
|
||
|
|
const nodesGroup = document.getElementById('nodesGroup');
|
||
|
|
const width = window.innerWidth;
|
||
|
|
const height = window.innerHeight;
|
||
|
|
|
||
|
|
// Define node positions
|
||
|
|
const nodes = [
|
||
|
|
{ x: width * 0.15, y: height * 0.35 },
|
||
|
|
{ x: width * 0.35, y: height * 0.55 },
|
||
|
|
{ x: width * 0.55, y: height * 0.25 },
|
||
|
|
{ x: width * 0.75, y: height * 0.65 },
|
||
|
|
{ x: width * 0.85, y: height * 0.45 },
|
||
|
|
{ x: width * 0.25, y: height * 0.75 },
|
||
|
|
{ x: width * 0.65, y: height * 0.85 }
|
||
|
|
];
|
||
|
|
|
||
|
|
// Define connections between nodes
|
||
|
|
const connections = [
|
||
|
|
[0, 1],
|
||
|
|
[1, 2],
|
||
|
|
[2, 3],
|
||
|
|
[3, 4],
|
||
|
|
[1, 5],
|
||
|
|
[5, 6],
|
||
|
|
[6, 3]
|
||
|
|
];
|
||
|
|
|
||
|
|
// Create paths
|
||
|
|
connections.forEach((conn, index) => {
|
||
|
|
const startNode = nodes[conn[0]];
|
||
|
|
const endNode = nodes[conn[1]];
|
||
|
|
|
||
|
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
|
|
const pathData = generateWavyPath(
|
||
|
|
startNode.x, startNode.y,
|
||
|
|
endNode.x, endNode.y,
|
||
|
|
2 + Math.floor(Math.random() * 2)
|
||
|
|
);
|
||
|
|
|
||
|
|
path.setAttribute('d', pathData);
|
||
|
|
path.setAttribute('class', 'wavy-line');
|
||
|
|
path.setAttribute('filter', 'url(#glow)');
|
||
|
|
path.style.opacity = 0.6 + Math.random() * 0.4;
|
||
|
|
path.style.animationDelay = `${index * 0.5}s`;
|
||
|
|
|
||
|
|
pathsGroup.appendChild(path);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Create nodes
|
||
|
|
nodes.forEach((node, index) => {
|
||
|
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||
|
|
circle.setAttribute('cx', node.x);
|
||
|
|
circle.setAttribute('cy', node.y);
|
||
|
|
circle.setAttribute('r', config.nodeRadius);
|
||
|
|
circle.setAttribute('class', 'node');
|
||
|
|
circle.style.animationDelay = `${index * 0.3}s`;
|
||
|
|
|
||
|
|
nodesGroup.appendChild(circle);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mouse interaction
|
||
|
|
function initMouseInteraction() {
|
||
|
|
const container = document.getElementById('container');
|
||
|
|
const cursorGlow = document.getElementById('cursorGlow');
|
||
|
|
|
||
|
|
container.addEventListener('mousemove', (e) => {
|
||
|
|
const rect = container.getBoundingClientRect();
|
||
|
|
const x = e.clientX - rect.left;
|
||
|
|
const y = e.clientY - rect.top;
|
||
|
|
|
||
|
|
cursorGlow.style.left = x + 'px';
|
||
|
|
cursorGlow.style.top = y + 'px';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Animate paths on load
|
||
|
|
function animatePaths() {
|
||
|
|
const paths = document.querySelectorAll('.wavy-line');
|
||
|
|
paths.forEach((path, index) => {
|
||
|
|
const length = path.getTotalLength();
|
||
|
|
path.style.strokeDasharray = length;
|
||
|
|
path.style.strokeDashoffset = length;
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
|
||
|
|
path.style.strokeDashoffset = '0';
|
||
|
|
}, index * 200);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Regenerate on resize
|
||
|
|
let resizeTimeout;
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
clearTimeout(resizeTimeout);
|
||
|
|
resizeTimeout = setTimeout(() => {
|
||
|
|
document.getElementById('pathsGroup').innerHTML = '';
|
||
|
|
document.getElementById('nodesGroup').innerHTML = '';
|
||
|
|
createPathsAndNodes();
|
||
|
|
setTimeout(animatePaths, 100);
|
||
|
|
}, 250);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
createPathsAndNodes();
|
||
|
|
initMouseInteraction();
|
||
|
|
setTimeout(animatePaths, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add parallax effect to blobs
|
||
|
|
document.addEventListener('mousemove', (e) => {
|
||
|
|
const blobs = document.querySelectorAll('.blob');
|
||
|
|
const x = e.clientX / window.innerWidth;
|
||
|
|
const y = e.clientY / window.innerHeight;
|
||
|
|
|
||
|
|
blobs.forEach((blob, index) => {
|
||
|
|
const speed = (index + 1) * 20;
|
||
|
|
const xOffset = (0.5 - x) * speed;
|
||
|
|
const yOffset = (0.5 - y) * speed;
|
||
|
|
blob.style.transform += ` translate(${xOffset}px, ${yOffset}px)`;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|