Halloween projection (#243)

* init * reduced motion guard * organization
argyleink · Oct 18, 2023 · 59b882a · 59b882a
1 parent f647a95
commit 59b882a
Show file tree

Hide file tree

Showing 10 changed files with 2,894 additions and 0 deletions.
diff --git a/halloween-projection/animations.css b/halloween-projection/animations.css
@@ -0,0 +1,28 @@
+@keyframes across-the-screen {
+  from {
+    transform: rotate(var(--_rotation, 0)) translateX(-110vw);
+  }
+  to {
+    transform: rotate(var(--_rotation, 0)) translateX(110vw);
+  }
+}
+
+@keyframes cross-fade {
+  10%, 90% { opacity: 0 } 
+  20%, 30% { opacity: 1 }
+}
+
+@keyframes flash {
+  0% { opacity: 0 }
+  2% { opacity: 1 }
+  3% { opacity: 0 }
+  5% { opacity: 0 }
+  7% { opacity: 1 }
+  8% { opacity: 0 }
+  37% { opacity: 0 }
+  39% { opacity: 1 }
+  41% { opacity: 0 }
+  65% { opacity: 0 }
+  67% { opacity: 1 }
+  68% { opacity: 0 }
+}
diff --git a/halloween-projection/favicon.ico b/halloween-projection/favicon.ico
diff --git a/halloween-projection/favicon.svg b/halloween-projection/favicon.svg
diff --git a/halloween-projection/halloween-projection.css b/halloween-projection/halloween-projection.css
@@ -0,0 +1,40 @@
+svg {
+  min-inline-size: 50vmin;
+  fill: #0f0a;
+}
+
+.skull-teeth {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: flash 5s ease 20ms infinite;
+  }
+}
+
+.skull-scream {
+  --_rotation: 25deg;
+  place-self: start;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: 
+      across-the-screen 5s var(--ease-in-out-5) infinite,
+      cross-fade 5s var(--ease-in-out-5) infinite
+    ;
+  }
+}
+
+.skull-sad {
+  --_rotation: -10deg;
+  place-self: start end;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: 
+      across-the-screen 7s var(--ease-in-out-5) -6.5s infinite reverse,
+      cross-fade 7s var(--ease-in-out-5) -6.5s infinite
+    ;
+  }
+}
+
+.skull-stare {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: flash 5s ease infinite;
+  }
+}
diff --git a/halloween-projection/index.html b/halloween-projection/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <title>Halloween Projection | GUI Challenges</title>
+    <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="Canvas">
+    <meta name="description" content="🙂">
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/style.css">
+  </head>
+  <body>
+
+    <div class="skull-teeth">
+      <svg viewBox="0 0 163.3 226.31">
+        <path d="m162.75,90.56c1.21-13.8,2.07-36.05-16.1-59.51S102.95-.23,81.65,0C60.37-.23,34.84,7.59,16.65,31.05S-.65,76.76.55,90.56s7.08,27.25,9.66,31.05,4.32,6.21,2.59,8.8-4.31,7.24-1.38,13.11,6.9,15.69,11.39,17.42,14.66,3.92,16.38,12.83c1.72,8.91-3.1,9.08-.34,13.91,2.76,4.83,15,14.48,17.94,24.83s15.87,13.8,24.84,13.8,21.9-3.45,24.84-13.8,15.18-20,17.94-24.83-2.07-5-.35-13.91,11.9-11.11,16.39-12.83,8.45-11.56,11.38-17.42.35-10.53-1.38-13.11,0-5,2.59-8.8,8.5-17.25,9.71-31.05Zm-81.07,36.86c5.4,0,11.5,12.76,11.5,18.4s-1.84,8.39-5.75,8.62-3.45-5.17-5.75-5.17-1.84,5.4-5.75,5.17-5.75-3-5.75-8.62,6.09-18.4,11.5-18.4h0Zm-54.86-14.27c.18-6.72,1.21-15.52,6.39-12.93s8.95,14,31.56,23.75c5.87,2.53-6.26,9.2-18.17,9.2s-19.95-13.29-19.78-20.02h0Zm78.57,72.84c-1.45.19-2.76-1.51-3.57-3.38-.23,2.68-1.25,5.53-2.78,5.66s-2.63-1.38-3.44-3.16c-.47,2.42-1.56,4.7-3,4.77-1.84.08-3.24-2.45-3.89-4.85-.47,2.76-1.81,5.65-3.46,5.66s-3-2.06-3.62-4.26c-.67,2.2-1.92,4.28-3.63,4.26s-3-2.9-3.46-5.66c-.65,2.4-2.05,4.93-3.89,4.85-1.41-.07-2.49-2.35-3-4.77-.8,1.78-2,3.29-3.44,3.16s-2.55-3-2.77-5.66c-.82,1.87-2.13,3.57-3.58,3.38s-2.46-3.6-2.37-6.33.75-3.88,3.77-3.25c1.75.37,2.7.94,3,2,.58-.51,1.53-.65,3.05-.39s2.67.74,3.12,1.63c.89-.43,1.9-.55,2.86-.33,1.88.22,3,.72,3.41,1.77.48-.91,1.54-1.28,3.55-1.11,1.7.14,2.79.5,3.38,1.28.58-.78,1.67-1.14,3.37-1.28,2-.17,3.07.2,3.56,1.11.44-1,1.53-1.55,3.4-1.77.96-.22,1.97-.1,2.86.33.45-.89,1.46-1.36,3.12-1.63s2.47-.12,3,.39c.27-1.09,1.22-1.66,3-2,3-.63,3.68.52,3.77,3.25s-.7,6.12-2.32,6.33Zm1.72-13.67c-1.07.21-2.16-.28-2.72-1.22v.47c.06,2.52-2.27,2.67-4.33,3-1.25.22-2.49-.44-3-1.6-.08,2.59-2.52,2.69-4.7,3-1.02.15-2.05-.25-2.7-1.06-.52,2.12-2.88,2.24-5,2.52-1.15.18-2.3-.28-3-1.21-.7.93-1.85,1.39-3,1.21-2.12-.28-4.49-.4-5-2.52-.65.81-1.68,1.21-2.71,1.06-2.17-.28-4.62-.38-4.69-3-.52,1.15-1.75,1.81-3,1.6-2.06-.31-4.39-.46-4.32-3v-.47c-.56.96-1.68,1.45-2.77,1.22-1.93-.37-4.13-.59-4-3s.71-8.16,3.65-8.08c1.9,0,3,3.91,3.43,6.42.4-2.36,1.28-4.67,3.21-4.69s3.39,4.11,3.9,6.71c.27-2.86,1.07-6.1,3.41-6.18,1.86-.07,3.27,3.13,4,5.79.4-2.86,1.34-5.71,3.59-5.79,1.89-.07,3.36,3.06,4.22,5.91.85-2.85,2.32-6,4.21-5.91,2.25.08,3.2,2.93,3.59,5.79.76-2.66,2.17-5.86,4-5.79,2.34.08,3.14,3.32,3.42,6.18.51-2.6,1.86-6.73,3.9-6.71s2.8,2.33,3.21,4.69c.4-2.51,1.53-6.37,3.42-6.42,2.94-.08,3.51,5.68,3.66,8.08s-1.92,2.63-3.86,3h-.02Zm9.62-39.15c-11.9,0-24-6.67-18.17-9.2,22.62-9.76,26.39-21.16,31.57-23.75s6.21,6.21,6.38,12.93-7.86,20.02-19.76,20.02h-.02Z"/>
+      </svg>
+    </div>
+
+    <div class="skull-scream">
+      <svg viewBox="0 0 168.85 246.48">
+        <path d="m164.45,99.63c-3.32-2.1-4.73-5.84-5.21-11.28-.96-7.79-2.59-15.49-4.87-23-1.85-5.43-1.51-7.6-14.23-28.63S100.46-3.61,73.72.57C36.23,6.38,15.32,41.75,9.37,53.84,3.61,65.54-.46,96.55.04,108.27c.68,15.9,4.34,17.43,7.8,28.87,3.32,11,5.33,17.52,11.26,24.52,2.96,3.99,8.6,4.83,12.59,1.87.03-.02.05-.04.08-.06,5.81,6.43,5.89,16.88,10.73,31.23s9.2,25.25,21,36.55,19.11,12.41,25.07,14.22,9.69.86,12-.42,5.44-2.81,8.44-2.15,7.81-1.87,11.47-5.17c4.57-4.15,8.07-9.36,10.18-15.16,2.63-7,2.29-22.79.39-29.41s-.37-11.69-2.72-18.9c-1.6-4.9-2.35-12.57-2.67-17,.84-.3,1.61-.75,2.28-1.34,1.68,1.26,3.92-.82,3.92-.82,0,0,2.51.88,2.81-1.36s-.79-6.31-.79-6.31c.53-6.81,7.74-12.06,15.81-18.45s15.21-8.85,18-15.34.09-11.9-3.24-14.01Zm-72.28,18.49c1.12-4.93,7.61-22.83,10.66-23,5.41-.35,12.38,20.79,12.65,25.5s-3,6.3-4.84,6.48-3.06-3.1-4.72-3.42-4.62,5.2-8,4.41-7.06-4.19-5.75-9.97Zm-50.51-40.5c4.26-7.21,12-12.16,20.21-13.68,12.85-2.37,19.42,8.63,21.56,16.8s1,13.07-10.19,18.71-23.79,9.39-27.61,4.12-8.24-18.74-3.97-25.95Zm76.63,105.87c-3.27,4.25.18,8.86.18,8.86-2.95,3.43.09,7.48.09,7.48-2.71,2-.51,6-.51,6-2.11,1.45-.72,4.7-.72,4.7-3.19-.31-4,3.71-4,3.71-3.06-.78-4.59,2.64-4.59,2.64-2.38-1.25-4.5,2.11-4.5,2.11-2.2-1.91-5,.81-5,.81-2.68-2.58-6.34.15-6.34.15-1.57-3.14-5.92-2.7-5.92-2.7-.15-2.11-1.54-3.93-3.53-4.63.12-1.03-.14-2.07-.73-2.92-.63-1.07-1.63-1.88-2.81-2.27,0,0,.59-1.45-.78-3.84-.96-1.51-2.35-2.7-4-3.4.12-1.56-.13-3.13-.73-4.58-.68-1.51-1.86-2.74-3.35-3.47.17-1.67-.16-3.36-.95-4.84-.85-1.48-2.22-2.58-3.85-3.1-1.16-1.66-5.45-4-8.19-8-3.84-5.63-6.97-12.63-9.84-20.63s2.8-9.65-6.52-15.4-19.92,1.4-19.92,1.4c1.88-2.51,5.69-8,14.83-5.65s10.55-.06,17.6.44,6.56,10,5.67,13.08-.87,5.94-.09,7.66,3.45,1,3.45,1c.66,1.79,2.66,2.7,4.45,2.04.03-.01.07-.03.1-.04,1.75,2.22,5.05.59,5.05.59,2.34,2.89,5.95.07,5.95.07,2.13,2.58,6.16-.52,6.16-.52,2.79,3.47,8.16-.15,8.16-.15,5.31,5.83,12.68-.2,12.68-.2,4.6,2.85,10.71-1.61,10.71-1.61.36.15.74.27,1.12.34-.26,5.95,1.55,17.24,1.55,17.24-3.16,2.28-.88,7.63-.88,7.63h0Zm23.13-85.48l-5.43-1.16s-13.13-.22-17.48-3.91-10.8-16.32-3.17-25.94c5.3-6.68,14.63-6,21.56-3.35s12.81,7.39,13.07,20.25c.26,12.86-3.12,15.28-8.55,14.11h0Z"/>
+      </svg>
+    </div>
+
+    <div class="skull-sad">
+      <svg viewBox="0 0 187.71 250.53">
+        <path d="m174.33,31.91C160.14,14.34,118.42-2.55,87.67.32S28.21,23.97,17.4,38.67-.13,72.2,0,81.07s5.1,19.38,4.68,25.46c-.29,4.27-3.5,10.35-4,13.81s4.31,11.66,6.08,16.39,2.37,10.56,2.79,13.85c.65,5.06,2.73,9.82,6,13.73,4,4.56,4.56,3.42,11.91,5.19s6.08,11.79,6.33,16-1.14,10.77-.12,12.79.66,6.46,1.8,9.76c.79,2.03,2.47,3.57,4.56,4.18-.51,2,1,5.79,3.77,10.9,2.63,4.82,6.59,12.54,7,17.35s.89,9.51,5.58,9.95,8.48-.7,13.05-.7,6.08,1.14,12.16.51,12.84-5.79,18.58-11.36,20.27-20.27,29.06-27.37,12.5-10.64,15.2-18.24.51-15.88-.76-26,.25-23.56,6.84-23.56,8.62,11.06,18.42,3.25,14-29.52,17.23-46.58,2.36-50.9-11.83-68.47ZM34.12,143.06c-.68,2.71-.34,9.8-6.76,10s-12.16,0-14.86-6.42-1.36-8.28-3.55-12.67-5.07-12.84-1.52-14.19,9.12-3.55,14.86-3.21c6.26.37,15.38,6.25,15.55,12.5s-3.04,11.29-3.72,13.99Zm17.4,33.45c-2.2.17-5.58,0-7.6,1.35s-6.07-.33-6.08-2.19.18-9.63,0-14.7-.17-13.51,2.36-14c5.33-1.06,16.65,20.1,16.52,24.33s-3,5.04-5.2,5.21Zm25.85-25.51c-5.58-2.53-7.61-5.74-12.51-9.12s-7.6-11.15-8.1-16.21c-.59-5.89,5.4-8.45,12.33-10.48l6.92-2s9.46-2.19,17.32,1,13.26,6.75,13.26,12.33-1.52,15.2-7.77,20.27-15.84,6.75-21.45,4.21Zm39.53,14.79c1.26,4.81,6.25,8.1,5.15,13.93s-4.65,11.41-19.6,19.6c0,0-1.1-4.31-3.12-4.54,0,0,1.33-2.41-2.66-7.41,0,0,6.88-5.28,7.22-11.53s1.69-6.93,4.73-7.1,5.91-3.46,6.59-5.4,3.29-6.08,9.63-8.62c0,0-9.21,6.25-7.94,11.07h0Z"/>
+      </svg>
+    </div>
+
+    <div class="skull-stare">
+      <svg viewBox="0 0 155.95 199.85">
+        <path d="m153.94,126.38c0-5.13-2.93-11.73-2.93-11.73,0,0,2.57-6.42,2.75-11.73,0-4-.44-8-1.28-11.91,3.57-10.18,6.87-35.75-3.58-52.54S107.11,0,77.97,0,17.48,21.67,7.04,38.47-.11,80.83,3.46,91.01c-.84,3.91-1.27,7.91-1.28,11.91.18,5.31,2.75,11.73,2.75,11.73,0,0-2.93,6.6-2.93,11.73s3.11,7.51,3.48,11.55-1.65,4.76,0,9.35,2.11,6,4.58,7.78,12.79,5.92,16.63,5.92,5.37-3.85,9.35-3.58,8.39,9.21,8.25,15.12.23,6.65,1.24,7.11c0,0,.48,2.31,2,2.65.22,1.2,1.2,2.12,2.41,2.27.47,1.63,1.83,2.86,3.5,3.16,0,0,.76,4.06,4.68,4,1.15,1.94,3.27,3.09,5.52,3,1.34,1.84,3.5,2.9,5.77,2.84,2.21,2.33,5.68,2.96,8.57,1.56,2.89,1.4,6.36.77,8.57-1.56,2.27.06,4.43-1,5.77-2.84,2.25.09,4.37-1.06,5.52-3,3.92.07,4.68-4,4.68-4,1.67-.3,3.03-1.53,3.5-3.16,1.21-.15,2.19-1.07,2.41-2.27,1.51-.34,2-2.65,2-2.65,1-.46,1.38-1.2,1.24-7.11s4.26-14.84,8.25-15.12,5.5,3.58,9.34,3.58,14.16-4.13,16.64-5.92,2.93-3.2,4.58-7.78-.37-5.32,0-9.35,3.46-6.38,3.46-11.55Zm-91.63-6.33c-3.71,4.81-7.56,5.77-18.83,6.32s-17.88-2.33-21.45-10.44-1.79-18.84,6.74-23.1c8.53-4.26,19,4.81,25.43,11.55s17,4.95,17,4.95l-5.22,5.91-3.67,4.81Zm27.63,30.79c-.55,3.85-3.11,8.25-6,8.25s-5.46-7.7-6-11.13c-.55,3.43-3.16,11.13-6,11.13s-5.4-4.4-6-8.25,3.16-10.44,5.22-15.94,2.75-12,4.13-13.34,2.61,1.79,2.61,1.79c0,0,1.24-3.16,2.61-1.79s2.06,7.84,4.13,13.34,5.84,12.09,5.29,15.94h0Zm44-34.91c-3.58,8.11-10.17,11-21.45,10.44s-15.12-1.51-18.83-6.32l-3.71-4.81-5.24-5.86s10.58,1.79,17-4.95,16.91-15.81,25.43-11.55,10.35,14.94,6.78,23.05h.02Z"/>
+      </svg>
+    </div>
+
+  </body>
+</html>