Added linear gradient page

2025-04-14 16:17:34 +10:00 · 2025-04-14 16:17:34 +10:00 · c6505cde26
commit c6505cde26
parent 0dedb0ec6a
2 changed files with 59 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -12,3 +12,4 @@ Small micro-projects that fit into a single HTML file. Used to experiment and me
 - [Swipeable scrolling](./src/scrolling.html)
 - [88x31](./src/88x31.html)
 - [Spawning queues](./src/spawning.html) - Fireworks!
+- [Animated linear gradients](./src/linear-gradients.html)
--- a/src/linear-gradients.html
+++ b/src/linear-gradients.html
@ -0,0 +1,58 @@
+<html>
+  <head>
+    <title>Linear Gradients</title>
+  </head>
+  <body></body>
+  <style>
+    @property --colour1 {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #86a8e7;
+    }
+
+    @property --colour2 {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #91eae4;
+    }
+
+    @property --angle {
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @keyframes tilt {
+      0% {
+        --angle: -45deg;
+      }
+
+      100% {
+        --angle: 45deg;
+      }
+    }
+
+    @keyframes shift {
+      0% {
+          --colour1: #86a8e7;
+          --colour2: #91eae4;
+      }
+      100% {
+          --colour1: #91eae4;
+          --colour2: #86a8e7;
+      }
+    }
+
+    html,
+    body {
+      height: 100vh;
+      padding: unset;
+      margin: unset;
+    }
+
+    body {
+      animation: tilt 10s infinite ease-in-out alternate, shift 5s infinite linear alternate;
+      background: linear-gradient(var(--angle), var(--colour1), var(--colour2));
+    }
+  </style>
+</html>