Fan-Samriddhi (#1790)

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 3, 2023 · 61c7123 · 61c7123
1 parent 46ab76b
commit 61c7123
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 0 deletions.
diff --git a/Art/Samriddhi/fan.css b/Art/Samriddhi/fan.css
@@ -0,0 +1,140 @@
+body {
+    background: purple;
+  }
+  .swatch {
+    display: block;
+    text-align: center;
+    position: relative;
+    margin: 100px;
+  }
+  .swatch div {
+    width: 70px;
+    height: 225px;
+    position: absolute;
+    top: 0px;
+    border-radius: 5px;
+    border-top: solid 2px rgba(0, 0, 0, 0.2);
+    border-left: solid 3px rgba(255, 255, 255, 0.2);
+    border-bottom: solid 3px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    box-sizing: border-box;
+    transform-origin: center 90%;
+    display: inline-block;
+    backface-visibility: hidden;
+    margin-left: -35px;
+    transform: rotate(0deg);
+  }
+  .swatch div:before {
+    width: 16px;
+    height: 16px;
+    content: "";
+    background-color: white;
+    display: inline-block;
+    border-radius: 8px;
+    bottom: 10px;
+    position: absolute;
+    margin-left: -8px;
+  }
+  .swatch div:nth-child(1) {
+    background-color: blue;
+    animation: swatch-purple-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .swatch div:nth-child(2) {
+    background-color: violet;
+    animation: swatch-blue-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .swatch div:nth-child(3) {
+    background-color: greenyellow;
+    animation: swatch-green-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .swatch div:nth-child(4) {
+    background-color: yellow;
+    animation: swatch-yellow-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .swatch div:nth-child(5) {
+    background-color: orange;
+    animation: swatch-orange-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .swatch div:nth-child(6) {
+    background-color: red;
+    animation: swatch-red-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  @keyframes swatch-purple-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(-65deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes swatch-blue-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(-40deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes swatch-green-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(-15deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes swatch-yellow-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(15deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes swatch-orange-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(40deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes swatch-red-motion {
+    0% {
+      transform: rotate(0deg);
+    }
+    30%,
+    70% {
+      transform: rotate(65deg);
+    }
+    90%,
+    10% {
+      transform: rotate(0deg);
+    }
+  }
+
diff --git a/Art/Samriddhi/fan.html b/Art/Samriddhi/fan.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Mandala</title>
+    <link rel="stylesheet" href="fan.css">
+</head>
+<body>
+    <div class="swatch">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+</body>
+</html>
diff --git a/Art/Samriddhi/fan.png b/Art/Samriddhi/fan.png
diff --git a/include.js b/include.js
@@ -55,6 +55,13 @@ let cards = [
     author: 'Ibaad',
     githubLink: 'https://github.com/ibaaddurrani'
   },
+  {
+    artName: 'Fan',
+    pageLink: './Art/Samriddhi/fan.html',
+    imageLink: './Art/Samriddhi/fan.png',
+    author: 'Samriddhi',
+    githubLink: 'https://github.com/NarayanSam'
+  },
   {
     artName: 'RGB Square',
     pageLink: './Art/TCrypt/animated.html',