From 93793d91ec1d35b7591a85c48c900efa2348b990 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 6 Jan 2025 15:27:58 -0500
Subject: [PATCH] docs(Arc): Simplify segment arc examples

---
 .../src/routes/docs/examples/Arc/+page.svelte | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
index 1e3c070b3..56e137449 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -135,11 +135,9 @@
         <SpringValue {value} let:value>
           {#each { length: segments } as _, segmentIndex}
             {@const segmentAngle = (2 * Math.PI) / segments}
-            {@const startAngle = segmentIndex * segmentAngle}
-            {@const endAngle = (segmentIndex + 1) * segmentAngle}
             <Arc
-              {startAngle}
-              {endAngle}
+              startAngle={segmentIndex * segmentAngle}
+              endAngle={(segmentIndex + 1) * segmentAngle}
               innerRadius={-20}
               cornerRadius={4}
               padAngle={0.02}
@@ -148,7 +146,7 @@
                   ? 'fill-success-300'
                   : 'fill-surface-content/10'
               )}
-            ></Arc>
+            />
           {/each}
 
           <Text
@@ -179,20 +177,13 @@
             <SpringValue {value} let:value>
               {#each { length: segments } as _, segmentIndex}
                 {@const segmentAngle = (2 * Math.PI) / segments}
-                {@const startAngle = segmentIndex * segmentAngle}
-                {@const endAngle = (segmentIndex + 1) * segmentAngle}
                 <Arc
-                  {startAngle}
-                  {endAngle}
+                  startAngle={segmentIndex * segmentAngle}
+                  endAngle={(segmentIndex + 1) * segmentAngle}
                   innerRadius={-20}
                   cornerRadius={4}
                   padAngle={0.02}
-                  class={cls(
-                    (segmentIndex / segments) * 100 < (value ?? 0)
-                      ? 'fill-success-300'
-                      : 'fill-surface-content/10'
-                  )}
-                ></Arc>
+                />
               {/each}
             </SpringValue>
           </svelte:fragment>
@@ -200,10 +191,9 @@
             {value}
             innerRadius={-20}
             spring
-            let:value
             class="fill-success-300"
             track={{ class: 'fill-surface-content/10' }}
-          ></Arc>
+          />
         </ClipPath>
 
         <Text