polygons use vars to prepare for hackpacks

Author: Adam Argyle

src/_vars.css

@@ -1,3 +1,4 @@
 @import "circles/_vars.css";
 @import "wipes/_vars.css";
-@import "squares/_vars.css";
+@import "squares/_vars.css";
+@import "polygons/_vars.css";

src/polygons/_vars.css

@@ -0,0 +1,7 @@
+:root {
+  --diamond-center-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
+  --diamond-center-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+
+  --opposing-corners-in: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  --opposing-corners-out: polygon(0 0, 50% 50%, 100% 100%, 50% 50%);
+}

src/polygons/diamond-in-center.css

@@ -1,9 +1,9 @@
 @keyframes diamond-in-center {
   from {
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    clip-path: var(--diamond-center-out);
   }
   to {
-    clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
+    clip-path: var(--diamond-center-in);
   }
 }
 

src/polygons/diamond-out-center.css

@@ -1,9 +1,9 @@
 @keyframes diamond-out-center {
   from {
-    clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
+    clip-path: var(--diamond-center-in);
   }
   to {
-    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    clip-path: var(--diamond-center-out);
   }
 }
 

src/polygons/opposing-corners-in.css

@@ -1,9 +1,9 @@
 @keyframes polygon-in-opposing-corners {
   from {
-    clip-path: polygon(0 0, 50% 50%, 100% 100%, 50% 50%);
+    clip-path: var(--opposing-corners-out);
   }
   to {
-    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+    clip-path: var(--opposing-corners-in);
   }
 }
 

src/polygons/opposing-corners-out.css

@@ -1,9 +1,9 @@
 @keyframes polygon-out-opposing-corners {
   from {
-    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+    clip-path: var(--opposing-corners-in);
   }
   to {
-    clip-path: polygon(0 0, 50% 50%, 100% 100%, 50% 50%);
+    clip-path: var(--opposing-corners-out);
   }
 }