fix: correct spinner triangles (#619)

zeno-ml · Dec 29, 2023 · f5f0951 · f5f0951
1 parent 66df33f
commit f5f0951
Showing 1 changed file with 28 additions and 83 deletions.
diff --git a/frontend/src/lib/components/general/Spinner.svelte b/frontend/src/lib/components/general/Spinner.svelte
@@ -3,11 +3,9 @@
 	export let height = 64;
 </script>
 
-<svg {width} {height} viewBox="-50 -50 791 783" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M674.293 343.006L339.293 343.006L339.293 8.00588L508.064 176.777L674.293 343.006Z"
-		fill="#612593"
-	>
+<svg {width} {height} viewBox="-612 -612 1224 1224" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<!-- Upper Triangles -->
+	<path d="M 0 0 L 512 0 L 0 -512 Z" fill="#6a1b9a">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -20,11 +18,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M339.632 343.352L172.047 175.768L339.632 8.18328V343.352Z"
-		fill="#612593"
-		fill-opacity="0.8"
-	>
+	<path d="M 0 0 L 0 -512 L -256 -256 Z" fill="#6a1b9a" fill-opacity="0.8">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -37,15 +31,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M339.985 343.244L171.985 343.244L171.985 175.244L339.985 343.244Z"
-		fill="#612593"
-		fill-opacity="0.6"
-	>
+	<path d="M 0 0 L -256 -256 L -256 0 Z" fill="#6a1b9a" fill-opacity="0.6">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -30,-20; 0,0"
+			values="0,0; -40,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -54,15 +44,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M172.331 343.259L88.8928 259.82L172.331 176.382V343.259Z"
-		fill="#612593"
-		fill-opacity="0.5"
-	>
+	<path d="M -256 0 L -256 -256 L -384 -128 Z" fill="#6a1b9a" fill-opacity="0.5">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -40,-20; 0,0"
+			values="0,0; -50,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -71,15 +57,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M172.008 343.008L89.0079 342.857L89.1581 259.858L172.008 343.008Z"
-		fill="#6A1B9A"
-		fill-opacity="0.4"
-	>
+	<path d="M -256 0 L -384 -128 L -384 0 Z" fill="#6a1b9a" fill-opacity="0.4">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -50,-20; 0,0"
+			values="0,0; -60,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -88,15 +70,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M89.5999 343.965L47.1735 301.539L88.8928 259.82L89.5999 343.965Z"
-		fill="#6A1B9A"
-		fill-opacity="0.3"
-	>
+	<path d="M -384 0 L -384 -128 L -448 -64 Z" fill="#6a1b9a" fill-opacity="0.3">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -60,-20; 0,0"
+			values="0,0; -70,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -105,15 +83,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M89.1735 343.285L47.1735 343.285L47.1735 301.285L89.1735 343.285Z"
-		fill="#6A1B9A"
-		fill-opacity="0.2"
-	>
+	<path d="M -384 0 L -448 0 L -448 -64 Z" fill="#6a1b9a" fill-opacity="0.2">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -70,-20; 0,0"
+			values="0,0; -80,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -122,15 +96,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M47.1732 345.379L25.2529 323.459L47.1732 301.539V345.379Z"
-		fill="#612593"
-		fill-opacity="0.1"
-	>
+	<path d="M -448 0 L -448 -64 L -480 -32 Z" fill="#6a1b9a" fill-opacity="0.1">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; -80,-20; 0,0"
+			values="0,0; -90,-20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -139,10 +109,9 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M4.12426 343.174L339.124 343.174L339.124 678.174L170.353 509.402L4.12426 343.174Z"
-		fill="#612593"
-	>
+
+	<!-- Lower Triangles -->
+	<path d="M 0 0 L -512 0 L 0 512 Z" fill="#6a1b9a">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -155,11 +124,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M339.051 340.587L508.207 509.428L339.209 678.426L339.051 340.587Z"
-		fill="#612593"
-		fill-opacity="0.8"
-	>
+	<path d="M 0 0 L 0 512 L 256 256 Z" fill="#6a1b9a" fill-opacity="0.8">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -172,15 +137,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M338.793 343.197L506.793 343.197L506.793 511.197L338.793 343.197Z"
-		fill="#612593"
-		fill-opacity="0.6"
-	>
+	<path d="M 0 0 L 256 256 L 256 0 Z" fill="#6a1b9a" fill-opacity="0.6">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; 30,20; 0,0"
+			values="0,0; 40,20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"
@@ -189,11 +150,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M506.938 342.525L590.938 342.525L590.938 426.525L506.938 342.525Z"
-		fill="#6A1B9A"
-		fill-opacity="0.4"
-	>
+	<path d="M 256 0 L 256 256 L 384 128 Z" fill="#6a1b9a" fill-opacity="0.5">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -206,11 +163,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M590.939 341.843L633.365 384.27L590.939 426.696V341.843Z"
-		fill="#6A1B9A"
-		fill-opacity="0.3"
-	>
+	<path d="M 256 0 L 384 128 L 384 0 Z" fill="#6a1b9a" fill-opacity="0.4">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -223,11 +176,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M590.294 341.49L634.276 342.754L633.07 384.737L590.294 341.49Z"
-		fill="#6A1B9A"
-		fill-opacity="0.2"
-	>
+	<path d="M 384 0 L 384 128 L 448 64 Z" fill="#6a1b9a" fill-opacity="0.3">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -240,7 +189,7 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path d="M634.779 343.257L655.992 364.471L634.779 385.684V343.257Z" fill="#EFE9F4">
+	<path d="M 384 0 L 448 0 L 448 64 Z" fill="#6a1b9a" fill-opacity="0.2">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
@@ -253,15 +202,11 @@
 			repeatCount="indefinite"
 		/>
 	</path>
-	<path
-		d="M506.793 342.552L590.939 426.697L506.086 511.55L506.793 342.552Z"
-		fill="#612593"
-		fill-opacity="0.5"
-	>
+	<path d="M 448 0 L 448 64 L 480 32 Z" fill="#6a1b9a" fill-opacity="0.1">
 		<animateTransform
 			attributeName="transform"
 			type="translate"
-			values="0,0; 40,20; 0,0"
+			values="0,0; 90,20; 0,0"
 			keyTimes="0; 0.5; 1"
 			begin="0s"
 			dur="2s"