Skip to content

Commit 8e18fa0

Browse files
Aviral02gitAviral02git
authored
addMorphing Shapes (#3249)
* addMorphing Shapes * change folder name
1 parent 60e76d6 commit 8e18fa0

3 files changed

Lines changed: 77 additions & 0 deletions

File tree

‎Art/Aviral02git-Morphing-Shapes/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Morphing Shapes</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="shape"></div>
12+
</div>
13+
</body>
14+
</html>

‎Art/Aviral02git-Morphing-Shapes/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Morphing Shapes",
3+
"githubHandle": "Aviral02git"
4+
}

‎Art/Aviral02git-Morphing-Shapes/styles.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
9+
background-size: 400% 400%;
10+
animation: gradientShift 15s ease infinite;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
overflow: hidden;
16+
}
17+
18+
.container {
19+
perspective: 1000px;
20+
}
21+
22+
.shape {
23+
width: 200px;
24+
height: 200px;
25+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
26+
animation: morph 6s ease-in-out infinite;
27+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
28+
}
29+
30+
@keyframes morph {
31+
0%, 100% {
32+
border-radius: 50%;
33+
transform: rotate(0deg) scale(1);
34+
}
35+
25% {
36+
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
37+
transform: rotate(90deg) scale(1.1);
38+
}
39+
50% {
40+
border-radius: 0%;
41+
transform: rotate(180deg) scale(0.9);
42+
}
43+
75% {
44+
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
45+
transform: rotate(270deg) scale(1.1);
46+
}
47+
}
48+
49+
@keyframes gradientShift {
50+
0% {
51+
background-position: 0% 50%;
52+
}
53+
50% {
54+
background-position: 100% 50%;
55+
}
56+
100% {
57+
background-position: 0% 50%;
58+
}
59+
}

0 commit comments

Comments
 (0)