add multipart diamond effect

Author: Adam Argyle

src/polygons/_includes.css

@@ -1,4 +1,6 @@
 @import "opposing-corners-in.css";
 @import "opposing-corners-out.css";
 @import "diamond-in-center.css";
-@import "diamond-out-center.css";
+@import "diamond-out-center.css";
+@import "diamond-in-height-width.css";
+@import "diamond-out-height-width.css";

src/polygons/_vars.css

@@ -1,6 +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%);
+  --diamond-height-stretched: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
 
   --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-height-width.css

@@ -0,0 +1,16 @@
+@keyframes diamond-in-double-scale {
+  0% {
+    clip-path: var(--diamond-center-out);
+  }
+  40% {
+    clip-path: var(--diamond-height-stretched);
+  }
+  100% {
+    clip-path: var(--diamond-center-in);
+  }
+}
+
+[transition="in:diamond:height-width"] {
+  --transition__duration: 1.5s;
+  animation-name: diamond-in-double-scale;
+}

src/polygons/diamond-out-height-width.css

@@ -0,0 +1,16 @@
+@keyframes diamond-out-double-scale {
+  0% {
+    clip-path: var(--diamond-center-in);
+  }
+  40% {
+    clip-path: var(--diamond-height-stretched);
+  }
+  100% {
+    clip-path: var(--diamond-center-out);
+  }
+}
+
+[transition="out:diamond:height-width"] {
+  --transition__duration: 1.5s;
+  animation-name: diamond-out-double-scale;
+}