From 29ad85d8d1bc0fdf186c5bed713735acc5960899 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Wed, 27 Aug 2025 00:20:54 +0200
Subject: [PATCH] Animate in path when animate element does not work

---
 src/App.tsx   |  1 +
 src/Graph.tsx | 83 ++++++++++++++++++++++++++++++---------------------
 src/index.css | 16 ++++++++++
 3 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e519182..e3c795c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -100,6 +100,7 @@ export default function App() {
 
     return { width: () => currentWidth, entries: () => currentEntries };
   };
+
   return (
     <main
       class="max-w-xl mx-auto bg-gray-200 h-full p-4 text-emerald-950"
diff --git a/src/Graph.tsx b/src/Graph.tsx
index 38c8b06..f85728e 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -35,6 +35,8 @@ type Aggregation = {
 };
 
 type Point = { x: number; y: number };
+
+const isPathAnimationSupported = CSS.supports('d: path("")');
 function aggregate(points: Point[]): Aggregation {
   console.debug("Aggregating", points.length);
   if (points.length === 0)
@@ -182,7 +184,7 @@ function YAxisMarks({
               y1={y}
               y2={y}
               stroke-linecap="round"
-              class="stroke-[0.5] stroke-gray-400"
+              class="stroke-3 stroke-gray-400"
             />
 
             <text x={2} y={y} alignment-baseline="middle">
@@ -201,8 +203,10 @@ function Path({
   points,
   projectX,
   projectY,
+  height,
 }: {
   points: Accessor<Point[]>;
+  height: Accessor<number>;
   projectX: Projector;
   projectY: Projector;
 }) {
@@ -215,16 +219,24 @@ function Path({
       }))
   );
 
-  /**
-   * A semicolon-separated list of entire path definitions (d="..."). This is where you define the key shapes:
-   */
-  const values = () =>
+  const from = () =>
+    `M${projected()
+      .map(({ x }) => `${x},${height()}`)
+      .join(" L")}`;
+
+  const to = () =>
     `M${projected()
-      .map(({ x }) => `${x},100`)
-      .join(" L")}; M${projected()
       .map(({ x, y }) => `${x},${y}`)
       .join(" L")}`;
 
+  const fromPath = () => `path("${from()}")`;
+  const toPath = () => `path("${to()}")`;
+
+  /**
+   * A semicolon-separated list of entire path definitions (d="..."). This is where you define the key shapes:
+   */
+  const values = () => `${from()};${to()}`;
+
   /**
    * A list of time markers (0 to 1) corresponding to each shape in {@link values}. This controls the timing of the bounce.
    * For example, `0; 0.8; 1` would spend 80% of the duration moving to the overshoot shape and 20% settling back.
@@ -243,18 +255,27 @@ function Path({
       .join(" L")}`;
 
   return (
-    <path d={path()} class="stroke-emerald-300 fill-none stroke-[0.5]">
-      <animate
-        attributeName="d"
-        values={values()}
-        dur="2s"
-        fill="freeze"
-        repeatCount={1}
-        calcMode="spline"
-        keySplines={EASE_OUT_KEY_SPLINES}
-        keyTimes={keyTimes}
-      />
-    </path>
+    <>
+      <style></style>
+      <path
+        d={path()}
+        class="stroke-emerald-300 fill-none stroke-3 test"
+        style={{ "--from": fromPath(), "--to": toPath() }}
+      >
+        <Show when={!isPathAnimationSupported}>
+          <animate
+            attributeName="d"
+            values={values()}
+            dur="2s"
+            fill="freeze"
+            repeatCount={1}
+            calcMode="spline"
+            keySplines={EASE_OUT_KEY_SPLINES}
+            keyTimes={keyTimes}
+          />
+        </Show>
+      </path>
+    </>
   );
 }
 
@@ -382,20 +403,24 @@ export default function Graph({ entries, width }: Properties) {
                   <line
                     {...projectedTrendLine}
                     stroke-linecap="round"
-                    class="stroke-[0.5] stroke-sky-400"
+                    class="stroke-3 stroke-sky-400"
                   />
                 );
               }}
             </Show>
-            <Path points={points} projectX={projectX} projectY={projectY} />
+            <Path
+              points={points}
+              projectX={projectX}
+              projectY={projectY}
+              height={height}
+            />
             <For each={points()}>
               {({ x, y }) => {
                 return (
-                  // TODO filter out values out of range
                   <circle
                     cx={projectX(x)}
                     cy={projectY(y)}
-                    r="1"
+                    r="3"
                     data-weight={y}
                     class="fill-emerald-500"
                   />
@@ -406,8 +431,7 @@ export default function Graph({ entries, width }: Properties) {
               d={`M${width() / 2 - 2.5},${height() / 2} l5,0 M${width() / 2},${
                 height() / 2 - 2.5
               } l0,5 `}
-              stroke-width={0.5}
-              class="stroke-gray-300"
+              class="stroke-gray-300 stroke-3"
             />
           </svg>
         );
@@ -415,12 +439,3 @@ export default function Graph({ entries, width }: Properties) {
     </Show>
   );
 }
-
-const observer = new MutationObserver((mutations) => {
-  console.debug("Mutation observed", mutations);
-});
-
-observer.observe(document.body, {
-  childList: true,
-  subtree: true,
-});
diff --git a/src/index.css b/src/index.css
index f1d8c73..d952daa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,17 @@
 @import "tailwindcss";
+
+.test {
+  animation-name: path-in;
+  animation-duration: 2s;
+  animation-timing-function: ease-in;
+  animation-direction: forwards;
+}
+
+@keyframes path-in {
+  from {
+    d: var(--from);
+  }
+  to {
+    d: var(--to);
+  }
+}
-- 
2.51.2