optimize static svg a lot

Author: vaaski

components/svg-hero.server.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const stages = [
+const roundTo = (decimals: number, n: number) =>
+	Math.round(n * 10 ** decimals) / 10 ** decimals
+
+const logoStages = [
 	"M 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 0.5 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 L 43.9409 0 Z",
 	"M96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 .5 0 43.9409 0 96.0379 101.889 96.0379 101.889 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186 96.0308 186Z",
 	"M170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 148.365 84.5494 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683 170.085 42.0683Z",
@@ -8,15 +11,15 @@ const stages = [
 	"M311.5 186 268.059 186 218.422 86.2804 205.508 111.348 243.678 186 200.237 186 148.365 84.5494 96.0308 186 .5 0 43.9409 0 96.0379 101.889 148.135 0 191.576 0 170.085 42.0683 182.144 65.654 215.969 0 239.394 45.6091 311.5 186Z",
 ]
 
-const values = computed(() => stages.join(";"))
+const values = computed(() => logoStages.join(";"))
 
 const keySplines = computed(() => {
-	return Array.from({ length: stages.length - 1 }, () => "0.87 0 0.13 1").join(";")
+	return Array.from({ length: logoStages.length - 1 }, () => "0.87 0 0.13 1").join(";")
 })
 
 const keyTimes = computed(() => {
-	const stepSize = 1 / (stages.length - 1)
-	return Array.from({ length: stages.length }, (_, index) => {
+	const stepSize = 1 / (logoStages.length - 1)
+	return Array.from({ length: logoStages.length }, (_, index) => {
 		return Math.min(index * stepSize, 1)
 	})
 		.map((v) => Math.floor(v * 100) / 100)
@@ -26,30 +29,35 @@ const keyTimes = computed(() => {
 const width = 1200
 const height = 630
 
-const STAR_AMOUNT = 50
+const STAR_AMOUNT = 30
 const X_SPEED = 0.125
+const ROUND_DECIMALS = 2
 
 const stars = Array.from({ length: STAR_AMOUNT })
 	.fill(0)
 	.map(() => {
 		const star = {
 			xStart: Math.random() * width,
 			xSpeed: (Math.random() * X_SPEED + X_SPEED / 2) * width,
-			size: Math.random() * 2 + 0.75,
+			size: Math.random() * 2 + 1.25,
 			duration: (Math.random() * 0.25 + 0.05) * 300,
 			begin: 0,
 		}
 
-		star.begin = Math.random() * (star.duration / 4)
+		star.begin = Math.random() * (star.duration / 3)
 
 		if (Math.random() > 0.5) {
 			star.xSpeed *= -1
 		}
 
+		star.xStart = roundTo(ROUND_DECIMALS, star.xStart)
+		star.xSpeed = roundTo(ROUND_DECIMALS, star.xSpeed)
+		star.size = roundTo(ROUND_DECIMALS, star.size)
+		star.duration = roundTo(ROUND_DECIMALS, star.duration)
+		star.begin = roundTo(ROUND_DECIMALS, star.begin)
+
 		return star
 	})
-
-console.log("test 2")
 </script>
 
 <template>
@@ -60,114 +68,85 @@ console.log("test 2")
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
 	>
-		<g clip-path="url(#clip0_174_79)">
-			<g id="backdrop" filter="url(#filter0_d_174_79)">
-				<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
-				<g opacity="0.75">
-					<rect
-						x="25"
-						y="25"
-						width="1150"
-						height="580"
-						rx="24"
-						fill="url(#paint0_radial_174_79)"
-					/>
-					<rect
-						x="25"
-						y="25"
-						width="1150"
-						height="580"
-						rx="24"
-						fill="url(#paint1_radial_174_79)"
-					/>
-					<rect
-						x="25"
-						y="25"
-						width="1150"
-						height="580"
-						rx="24"
-						fill="url(#paint2_radial_174_79)"
-					/>
-					<rect
-						x="25"
-						y="25"
-						width="1150"
-						height="580"
-						rx="24"
-						fill="url(#paint3_radial_174_79)"
-					/>
-				</g>
+		<g filter="url(#s)">
+			<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
+			<g opacity="0.75">
+				<rect x="25" y="25" width="1150" height="580" rx="24" fill="url(#p0)" />
+				<rect x="25" y="25" width="1150" height="580" rx="24" fill="url(#p1)" />
+				<rect x="25" y="25" width="1150" height="580" rx="24" fill="url(#p2)" />
+				<rect x="25" y="25" width="1150" height="580" rx="24" fill="url(#p3)" />
 			</g>
-			<clipPath id="background-clip">
-				<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
-			</clipPath>
-			<circle
-				v-for="star in stars"
-				:key="star.begin"
-				:opacity="star.size / 7.5"
-				:r="star.size"
-				fill="white"
-				clip-path="url(#background-clip)"
-			>
-				<animate
-					attributeName="cy"
-					:values="`${height}; 0`"
-					:dur="`${star.duration}s`"
-					:begin="`${star.begin}s`"
-					repeatCount="indefinite"
-				/>
+		</g>
+		<clipPath id="background-clip">
+			<rect x="25" y="25" width="1150" height="580" rx="24" fill="black" />
+		</clipPath>
+		<circle
+			v-for="star in stars"
+			:key="star.begin"
+			:opacity="roundTo(ROUND_DECIMALS, star.size / 7.5)"
+			:r="star.size"
+			fill="#fff"
+			clip-path="url(#background-clip)"
+		>
+			<animate
+				attributeName="cy"
+				:values="`${height}; 0`"
+				:dur="`${star.duration}s`"
+				:begin="`${star.begin}s`"
+				repeatCount="indefinite"
+			/>
+			<animate
+				attributeName="cx"
+				:values="`${star.xStart}; ${roundTo(ROUND_DECIMALS, star.xStart + star.xSpeed)}`"
+				:dur="`${star.duration}s`"
+				:begin="`${star.begin}s`"
+				repeatCount="indefinite"
+			/>
+		</circle>
+		<g clip-path="url(#background-clip)" opacity="0">
+			<!-- logo glow -->
+			<animate
+				attributeName="opacity"
+				values="0;0.3"
+				dur="3s"
+				begin="0.5s"
+				fill="freeze"
+			/>
+			<rect
+				x="-156"
+				y="-176"
+				width="1512"
+				height="982"
+				fill="url(#p4)"
+				fill-opacity="0.41"
+			/>
+			<rect x="-156" y="-176" width="1512" height="982" fill="url(#p5)" />
+		</g>
+		<svg
+			width="312"
+			height="186"
+			:x="width / 2 - 312 / 2"
+			:y="height / 2 - 186 / 2"
+			viewBox="0 0 312 186"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path ref="path" fill="white">
 				<animate
-					attributeName="cx"
-					:values="`${star.xStart}; ${star.xStart + star.xSpeed}`"
-					:dur="`${star.duration}s`"
-					:begin="`${star.begin}s`"
-					repeatCount="indefinite"
+					attributeName="d"
+					begin="250ms"
+					dur="750ms"
+					fill="freeze"
+					calcMode="spline"
+					:keySplines="keySplines"
+					:keyTimes="keyTimes"
+					:values="values"
 				/>
-			</circle>
-			<g id="logo-glow" opacity="0" class="glow-fade-in">
-				<rect
-					x="-156"
-					y="-176"
-					width="1512"
-					height="982"
-					fill="url(#paint4_radial_174_79)"
-					fill-opacity="0.41"
-				/>
-				<rect
-					x="-156"
-					y="-176"
-					width="1512"
-					height="982"
-					fill="url(#paint5_radial_174_79)"
-				/>
-			</g>
-			<svg
-				id="logo"
-				width="312"
-				height="186"
-				:x="width / 2 - 312 / 2"
-				:y="height / 2 - 186 / 2"
-				viewBox="0 0 312 186"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path ref="path" fill="white">
-					<animate
-						attributeName="d"
-						begin="250ms"
-						dur="750ms"
-						fill="freeze"
-						calcMode="spline"
-						:keySplines="keySplines"
-						:keyTimes="keyTimes"
-						:values="values"
-					/>
-				</path>
-			</svg>
-		</g>
+			</path>
+		</svg>
 		<defs>
 			<filter
-				id="filter0_d_174_79"
+				id="s"
 				x="5"
 				y="5"
 				width="1198"
@@ -189,20 +168,11 @@ console.log("test 2")
 					type="matrix"
 					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
 				/>
-				<feBlend
-					mode="normal"
-					in2="BackgroundImageFix"
-					result="effect1_dropShadow_174_79"
-				/>
-				<feBlend
-					mode="normal"
-					in="SourceGraphic"
-					in2="effect1_dropShadow_174_79"
-					result="shape"
-				/>
+				<feBlend mode="normal" in2="BackgroundImageFix" result="e1" />
+				<feBlend mode="normal" in="SourceGraphic" in2="e1" result="shape" />
 			</filter>
 			<radialGradient
-				id="paint0_radial_174_79"
+				id="p0"
 				cx="0"
 				cy="0"
 				r="1"
@@ -213,7 +183,7 @@ console.log("test 2")
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
 			<radialGradient
-				id="paint1_radial_174_79"
+				id="p1"
 				cx="0"
 				cy="0"
 				r="1"
@@ -224,7 +194,7 @@ console.log("test 2")
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
 			<radialGradient
-				id="paint2_radial_174_79"
+				id="p2"
 				cx="0"
 				cy="0"
 				r="1"
@@ -235,7 +205,7 @@ console.log("test 2")
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
 			<radialGradient
-				id="paint3_radial_174_79"
+				id="p3"
 				cx="0"
 				cy="0"
 				r="1"
@@ -246,7 +216,7 @@ console.log("test 2")
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
 			<radialGradient
-				id="paint4_radial_174_79"
+				id="p4"
 				cx="0"
 				cy="0"
 				r="1"
@@ -257,7 +227,7 @@ console.log("test 2")
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
 			<radialGradient
-				id="paint5_radial_174_79"
+				id="p5"
 				cx="0"
 				cy="0"
 				r="1"
@@ -267,24 +237,6 @@ console.log("test 2")
 				<stop stop-color="white" stop-opacity="0.43" />
 				<stop offset="1" stop-opacity="0" />
 			</radialGradient>
-			<clipPath id="clip0_174_79">
-				<rect :width="width" :height="height" fill="white" />
-			</clipPath>
 		</defs>
 	</svg>
 </template>
-
-<style scoped lang="scss">
-.glow-fade-in {
-	animation: fade-in 2000ms forwards;
-	animation-delay: 500ms;
-}
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 0.4;
-	}
-}
-</style>