Merge pull request #61 from JonathanAllisson/captain

Captain America Animation
pulkit-30 · Oct 12, 2021 · 8d6122f · 8d6122f
2 parents 9fedfa1 + 439ba88
commit 8d6122f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 0 deletions.
diff --git a/Captain-america-animation/README.md b/Captain-america-animation/README.md
@@ -0,0 +1,3 @@
+# Captain America animation
+<img src="./captain.png">
+by [JonathanAllisson](https://github.com/JonathanAllisson)
diff --git a/Captain-america-animation/captain.png b/Captain-america-animation/captain.png
diff --git a/Captain-america-animation/index.html b/Captain-america-animation/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+    <title>Captain America</title>
+</head>
+<body>
+    <svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle class="captain-america" cx="300" cy="300" r="268.5" fill="#E43030" stroke="#E43030" stroke-width="1"/>
+      <circle class="captain-america" cx="300" cy="300" r="218.5" fill="white" stroke="white" stroke-width="1"/>
+      <circle class="captain-america" cx="300" cy="300" r="168.5" fill="#E43030" stroke="#E43030" stroke-width="1"/>
+      <circle class="captain-america" cx="300" cy="300" r="118.5" fill="#367DE8" stroke="#367DE8" stroke-width="1"/>
+      <path class="captain-america" d="M298.589 188.335C299.065 187.013 300.935 187.013 301.411 188.335L326.817 258.789C327.443 260.524 329.063 261.702 330.907 261.761L405.764 264.152C407.168 264.196 407.745 265.974 406.636 266.836L347.481 312.77C346.024 313.901 345.405 315.806 345.918 317.577L366.777 389.51C367.168 390.859 365.656 391.957 364.493 391.168L302.527 349.103C301.002 348.067 298.998 348.067 297.473 349.103L235.507 391.168C234.344 391.957 232.832 390.859 233.223 389.51L254.082 317.577C254.595 315.806 253.976 313.901 252.519 312.77L193.364 266.836C192.255 265.974 192.832 264.196 194.236 264.152L269.093 261.761C270.937 261.702 272.557 260.524 273.183 258.789L298.589 188.335Z" fill="white" stroke="white" stroke-width="1"/>
+    </svg>
+</body>
+</html>
diff --git a/Captain-america-animation/styles.css b/Captain-america-animation/styles.css
@@ -0,0 +1,34 @@
+body {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: #0f5ccf;
+}
+
+.captain-america{
+    fill-opacity: 0;
+
+    animation: captain-america 5s ease-in infinite alternate;
+}
+
+@keyframes captain-america {
+    0% {
+        stroke-dasharray: 150 30;
+        stroke-dashoffset: 300;
+        fill-opacity: 0;
+    }
+    80% {
+        stroke-dasharray: 800 0;
+        stroke-dashoffset: 0;
+        fill-opacity: 0;
+    }
+    90% {
+        fill-opacity: 1;
+    }
+    100% {
+        fill-opacity: 1;
+    }
+}
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@
 | Card Flip on Hold             | https://gabrielgomeso.github.io/card_flip.html                          |
 | Credit Cards                  | https://iqbalutomo.github.io/credit-cards/                              |
 | Loader Glowing                | https://jonathanallisson.github.io/loader/                              |
+| Captain America Animation     | https://jonathanallisson.github.io/Captain/                             |
 
 ---