diff --git a/src/_vars.css b/src/_vars.css
index af10ca6..c03e0d3 100644
--- a/src/_vars.css
+++ b/src/_vars.css
@@ -1,3 +1,4 @@
 @import "circles/_vars.css";
 @import "wipes/_vars.css";
-@import "squares/_vars.css";
\ No newline at end of file
+@import "squares/_vars.css";
+@import "polygons/_vars.css";
\ No newline at end of file
diff --git a/src/polygons/_vars.css b/src/polygons/_vars.css
new file mode 100644
index 0000000..6303729
--- /dev/null
+++ b/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%);
+}
\ No newline at end of file
diff --git a/src/polygons/diamond-in-center.css b/src/polygons/diamond-in-center.css
index f1f1615..e200dea 100644
--- a/src/polygons/diamond-in-center.css
+++ b/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);
   }
 }
 
diff --git a/src/polygons/diamond-out-center.css b/src/polygons/diamond-out-center.css
index c4a6a4f..6b5c546 100644
--- a/src/polygons/diamond-out-center.css
+++ b/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);
   }
 }
 
diff --git a/src/polygons/opposing-corners-in.css b/src/polygons/opposing-corners-in.css
index 6c7874e..d7a73d6 100644
--- a/src/polygons/opposing-corners-in.css
+++ b/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);
   }
 }
 
diff --git a/src/polygons/opposing-corners-out.css b/src/polygons/opposing-corners-out.css
index 102cdd3..071def2 100644
--- a/src/polygons/opposing-corners-out.css
+++ b/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);
   }
 }