vallsv · vallsv · Jan 5, 2026 · Jan 5, 2026 · Jan 5, 2026 · Jan 5, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed `Pointer`, which was rendering a string in some context, instead of a JSX element
+- Fixed `Spiral` glitches, mainly when a the first fullturn was display
 
 ### Changed
 

diff --git a/lib/src/Spiral.tsx b/lib/src/Spiral.tsx
@@ -1,15 +1,14 @@
 import { useKnobContext } from './context';
 import React, { useMemo } from 'react';
 
-function pointOnCircle(
+function pathCoordOnCircle(
     center: [number, number],
     radius: number,
     angle: number,
-) {
-    return {
-        x: center[0] + radius * Math.cos(angle),
-        y: center[1] + radius * Math.sin(angle),
-    };
+): string {
+    const x = (center[0] + radius * Math.cos(angle)).toFixed(3);
+    const y = (center[1] + radius * Math.sin(angle)).toFixed(3);
+    return `${x},${y}`;
 }
 
 function degTorad(deg: number) {
@@ -51,7 +50,7 @@ function calcPath(props: {
     const startAngleRad = degTorad(startAngle);
     const endAngleRad = degTorad(startAngle + angle);
 
-    const nb = Math.ceil(percentageMax - percentageMin) * 4;
+    const nb = Math.ceil((percentageMax - percentageMin) * 4) + 3;
     let forth = '';
     let start = '';
     let back = '';
@@ -63,19 +62,22 @@ function calcPath(props: {
         const innerRadius = outerRadius - arcWidth;
         const angleRad = startAngleRad + (endAngleRad - startAngleRad) * coef;
         const angleDeg = ((angleRad * 180) / Math.PI) * coef;
-        const po = pointOnCircle(center, outerRadius, angleRad);
-        const pi = pointOnCircle(center, innerRadius, angleRad);
+        const po = pathCoordOnCircle(center, outerRadius, angleRad);
+        const pi = pathCoordOnCircle(center, innerRadius, angleRad);
         if (i === 0) {
-            start = `${po.x},${po.y} `;
+            start = `${po} `;
         } else {
-            forth += `${outerRadius},${outerRadius} ${angleDeg} 0 1 ${po.x},${po.y} `;
+            forth += `${outerRadius.toFixed(3)},${outerRadius.toFixed(
+                3,
+            )} ${angleDeg.toFixed(3)} 0 1 ${po} `;
         }
         if (i === nb) {
-            link = `${pi.x},${pi.y} `;
+            link = `${pi} `;
         } else {
             back =
-                `${innerRadius},${innerRadius} ${angleDeg} 0 0 ${pi.x},${pi.y} ` +
-                back;
+                `${innerRadius.toFixed(3)},${innerRadius.toFixed(
+                    3,
+                )} ${angleDeg.toFixed(3)} 0 0 ${pi} ` + back;
         }
     }
     return `M ${start}A ${forth}L ${link}A ${back}z`;

diff --git a/lib/test/__snapshots__/Spiral.spec.tsx.snap b/lib/test/__snapshots__/Spiral.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`Spiral > renders with less than 1 turn 1`] = `
 >
   <g>
     <path
-      d="M 108.77852522924732,-30.90169943749474 A 87.5,87.5 2.25 0 1 136.42272980207457,63.6880156910202 75,75 36 0 1 73.17627457812105,121.32923872213651 62.5,62.5 101.25 0 1 5.805826175840785,94.19417382415922 50,50 198.00000000000003 0 1 2.447174185242318,34.549150281252636 L 7.202456766718086,36.09423525312737 A 57.5,57.5 101.25 0 0 9.341360081773523,90.65863991822648 70,70 36 0 0 71.63118960624632,116.57395614066074 82.5,82.5 2.25 0 0 131.48428809909888,62.905843365819045 95,95 0 0 0 105.83959896778495,-26.856614465620012 z"
+      d="M 108.779,-30.902 A 91.667,91.667 -2.000 0 1 139.664,30.941 83.333,83.333 10.000 0 1 122.169,91.667 75.000,75.000 36.000 0 1 73.176,121.329 66.667,66.667 76.000 0 1 22.884,110.903 58.333,58.333 130.000 0 1 -3.290,73.726 50.000,50.000 198.000 0 1 2.447,34.549 L 7.202,36.094 A 53.333,53.333 130.000 0 0 1.278,71.693 61.667,61.667 76.000 0 0 24.918,106.335 70.000,70.000 36.000 0 0 71.631,116.574 78.333,78.333 10.000 0 0 117.839,89.167 86.667,86.667 -2.000 0 0 134.773,31.981 95.000,95.000 0.000 0 0 105.840,-26.857 z"
       style="fill: lime;"
     />
   </g>
@@ -21,7 +21,7 @@ exports[`Spiral > renders with more than 1 turn 1`] = `
 >
   <g>
     <path
-      d="M 50.00000000000001,-50 A 97.5,97.5 0 0 1 147.5,50 95,95 9 0 1 50.00000000000001,145 92.5,92.5 27 0 1 -42.5,50.000000000000014 90,90 54 0 1 49.999999999999986,-40 87.5,87.5 90 0 1 137.5,49.99999999999998 85,85 135 0 1 50.00000000000003,135 82.5,82.5 189 0 1 -32.5,50.00000000000003 80,80 252 0 1 49.999999999999964,-30 77.5,77.5 324 0 1 127.5,49.999999999999964 75,75 404.99999999999994 0 1 50.00000000000004,125 72.5,72.5 495.0000000000001 0 1 -22.5,49.999999999999915 70,70 593.9999999999999 0 1 49.99999999999983,-20 67.5,67.5 702 0 1 117.5,49.99999999999995 65,65 819.0000000000001 0 1 49.999999999999936,115 62.5,62.5 944.9999999999998 0 1 -12.5,50.00000000000028 60,60 1079.9999999999998 0 1 49.99999999999984,-10 57.5,57.5 1224 0 1 107.5,49.99999999999994 55,55 1377.0000000000002 0 1 49.99999999999996,105 52.5,52.5 1538.9999999999998 0 1 -2.5,50.00000000000024 50,50 1709.9999999999998 0 1 49.99999999999985,0 L 49.999999999999865,5 A 47.5,47.5 1538.9999999999998 0 0 2.5,50.00000000000022 50,50 1377.0000000000002 0 0 49.999999999999964,100 52.5,52.5 1224 0 0 102.5,49.99999999999995 55,55 1079.9999999999998 0 0 49.99999999999985,-5 57.5,57.5 944.9999999999998 0 0 -7.5,50.000000000000256 60,60 819.0000000000001 0 0 49.99999999999994,110 62.5,62.5 702 0 0 112.5,49.99999999999996 65,65 593.9999999999999 0 0 49.999999999999844,-15 67.5,67.5 495.0000000000001 0 0 -17.5,49.99999999999992 70,70 404.99999999999994 0 0 50.000000000000036,120 72.5,72.5 324 0 0 122.5,49.999999999999964 75,75 252 0 0 49.999999999999964,-25 77.5,77.5 189 0 0 -27.5,50.00000000000003 80,80 135 0 0 50.00000000000002,130 82.5,82.5 90 0 0 132.5,49.99999999999998 85,85 54 0 0 49.999999999999986,-35 87.5,87.5 27 0 0 -37.5,50.000000000000014 90,90 9 0 0 50.00000000000001,140 92.5,92.5 0 0 0 142.5,50 95,95 0 0 0 50.00000000000001,-45 z"
+      d="M 50.000,-50.000 A 97.826,97.826 -0.510 0 1 145.780,30.097 95.652,95.652 5.784 0 1 88.108,137.733 93.478,93.478 18.885 0 1 -26.369,103.907 91.304,91.304 38.790 0 1 -16.729,-12.320 89.130,89.130 65.501 0 1 96.311,-26.155 86.957,86.957 99.017 0 1 131.936,79.120 84.783,84.783 139.338 0 1 38.455,133.993 82.609,82.609 186.465 0 1 -32.416,55.637 80.435,80.435 240.397 0 1 28.299,-27.452 78.261,78.261 301.134 0 1 119.487,13.995 76.087,76.087 368.677 0 1 98.018,109.022 73.913,73.913 443.025 0 1 3.354,107.335 71.739,71.739 524.178 0 1 -13.696,16.995 69.565,69.565 612.136 0 1 68.768,-16.986 67.391,67.391 706.900 0 1 117.234,54.599 65.217,65.217 808.469 0 1 58.880,114.610 63.043,63.043 916.843 0 1 -9.403,71.112 60.870,60.870 1032.023 0 1 18.373,-2.008 58.696,58.696 1154.008 0 1 92.897,9.937 56.522,56.522 1282.798 0 1 96.177,82.595 54.348,54.348 1418.393 0 1 28.348,99.848 52.174,52.174 1560.794 0 1 -1.083,39.385 50.000,50.000 1710.000 0 1 50.000,0.000 L 50.000,5.000 A 47.174,47.174 1560.794 0 0 3.813,40.402 49.348,49.348 1418.393 0 0 30.340,95.262 51.522,51.522 1282.798 0 0 92.092,79.712 53.696,53.696 1154.008 0 0 89.243,13.350 55.870,55.870 1032.023 0 0 20.971,2.264 58.043,58.043 916.843 0 0 -4.692,69.438 60.217,60.217 808.469 0 0 58.200,109.657 62.391,62.391 706.900 0 0 112.246,54.258 64.565,64.565 612.136 0 0 67.419,-12.171 66.739,66.739 524.178 0 0 -9.257,19.296 68.913,68.913 443.025 0 0 6.510,103.457 71.087,71.087 368.677 0 0 94.862,105.143 73.261,73.261 301.134 0 0 115.047,16.295 75.435,75.435 240.397 0 0 29.648,-22.637 77.609,77.609 186.465 0 0 -27.428,55.296 79.783,79.783 139.338 0 0 39.136,129.040 81.957,81.957 99.017 0 0 127.224,77.446 84.130,84.130 65.501 0 0 93.713,-21.883 86.304,86.304 38.790 0 0 -13.074,-8.907 88.478,88.478 18.885 0 0 -22.284,101.024 90.652,90.652 5.784 0 0 86.116,133.147 92.826,92.826 -0.510 0 0 140.885,31.114 95.000,95.000 0.000 0 0 50.000,-45.000 z"
       style="fill: lime;"
     />
   </g>