From d25d4da0abac12d7b5420061ad5c080cf643b259 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 11 Jan 2026 02:37:54 +0100
Subject: [PATCH] Make it variable

---
 src/App.css | 36 ++++++++++++++++++------------------
 src/App.tsx | 38 +++++++++++++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index a1f4546..8809bed 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,7 +2,10 @@
   background-color: black;
   height: 100dvh;
   accent-color: black;
-  --depth: 20%;
+  --valey-width: 20%;
+  --starting-x: 10%;
+  --y1: 10%;
+  --y2: 20%;
 }
 
 input {
@@ -10,31 +13,28 @@ input {
   /*   margin-inline: auto; */
 }
 
+@function --curve-x(--n <number>) {
+  result: calc(var(--n) * var(--starting-x) + var(--valey-width) / 2);
+}
+
 body {
   background-color: red;
   height: 100%;
-  /*   clip-path: shape(
-  from 25% 25%,
-  hline to 75%,
-  vline to 100%,
-  curve to 25% 100% with 75% 25% / 25% 25%,
-  close
-  ); */
   align-content: center;
   justify-items: center;
   clip-path: shape(
-    from 10% 10%,
-    curve to 20% var(--depth) with 15% 10% / 15% var(--depth),
-    curve to 30% 10% with 25% var(--depth) / 25% 10%,
-    curve to 40% var(--depth) with 35% 10% / 35% var(--depth),
-    curve to 50% 10% with 45% var(--depth) / 45% 10%,
-    curve to 60% var(--depth) with 55% 10% / 55% var(--depth),
-    curve to 70% 10% with 65% var(--depth) / 65% 10%,
-    curve to 80% var(--depth) with 75% 10% / 75% var(--depth),
-    curve to 90% 10% with 85% var(--depth) / 85% 10%,
+    from var(--starting-x) var(--y1),
+    curve to --curve-x(1) var(--y2) with 15% var(--y1) / 15% var(--y2),
+    curve to --curve-x(2) var(--y1) with 25% var(--y2) / 25% var(--y1),
+    curve to --curve-x(3) var(--y2) with 35% var(--y1) / 35% var(--y2),
+    curve to --curve-x(4) var(--y1) with 45% var(--y2) / 45% var(--y1),
+    curve to --curve-x(5) var(--y2) with 55% var(--y1) / 55% var(--y2),
+    curve to --curve-x(6) var(--y1) with 65% var(--y2) / 65% var(--y1),
+    curve to --curve-x(7) var(--y2) with 75% var(--y1) / 75% var(--y2),
+    curve to --curve-x(8) var(--y1) with 85% var(--y2) / 85% var(--y1),
     hline to 90%,
     vline to 90%,
-    hline to 10%,
+    hline to var(--starting-x),
     close
   );
 }
diff --git a/src/App.tsx b/src/App.tsx
index ecf4e0d..060e7dc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,21 +2,49 @@ import { createEffect, createSignal } from "solid-js";
 import "./App.css";
 
 function App() {
-  const [depth, setDepth] = createSignal(20);
+  const [y1, setY1] = createSignal(10);
 
   createEffect(() =>
-    document.documentElement.style.setProperty("--depth", depth() + "%")
+    document.documentElement.style.setProperty("--y1", y1() + "%")
+  );
+
+  const [y2, setY2] = createSignal(20);
+
+  createEffect(() =>
+    document.documentElement.style.setProperty("--y2", y2() + "%")
+  );
+
+  const [slope, setSlope] = createSignal(0);
+
+  createEffect(() =>
+    document.documentElement.style.setProperty("--slope", slope() + "%")
   );
 
   return (
     <>
-      <label for="depth">Depth</label>
+      <label for="y1">Y1</label>
       <input
-        id="depth"
+        id="y1"
         type="range"
         max="100"
         value="20"
-        onInput={(event) => setDepth(+event.currentTarget.value)}
+        onInput={(event) => setY1(+event.currentTarget.value)}
+      />
+      <label for="y2">Y2</label>
+      <input
+        id="y2"
+        type="range"
+        max="100"
+        value="20"
+        onInput={(event) => setY2(+event.currentTarget.value)}
+      />
+      <label for="slope">Slope</label>
+      <input
+        id="slope"
+        type="range"
+        max="100"
+        value="0"
+        onInput={(event) => setSlope(+event.currentTarget.value)}
       />
     </>
   );
-- 
2.51.2