71 lines
12 KiB
TypeScript
71 lines
12 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import "styles/echoes.css";
|
|
|
|
export const Echoes: React.FC = () => {
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
|
|
|
useEffect(() => {
|
|
// 优化动画性能
|
|
if (svgRef.current) {
|
|
svgRef.current.style.willChange = "transform";
|
|
|
|
// 使用 requestAnimationFrame 来优化动画
|
|
const paths = svgRef.current.querySelectorAll("path");
|
|
paths.forEach((path) => {
|
|
path.style.willChange = "transform";
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
if (svgRef.current) {
|
|
svgRef.current.style.willChange = "auto";
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<svg
|
|
ref={svgRef}
|
|
className="animated-text w-full h-full"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
viewBox="50.4 44.600006 234.1 86"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{
|
|
transform: "translateZ(0)", // 启用硬件加速
|
|
backfaceVisibility: "hidden",
|
|
}}
|
|
>
|
|
<path
|
|
d="M 77.6 116.50001 Q 75.5 118.30001 72.75 118.600006 Q 70 118.90001 67.4 117.75001 Q 64.8 116.600006 63.1 114.200005 Q 61.4 112.00001 60.9 109.15001 Q 60.4 106.30001 60.8 101.700005 Q 61.1 97.8 63.3 93.850006 Q 65.5 89.90001 68.65 86.8 Q 71.8 83.70001 74.9 82.50001 Q 76.4 81.50001 77.45 81.55 Q 78.5 81.600006 80.7 81.8 Q 83 82.100006 84.15 82.70001 Q 85.3 83.3 86 84.3 Q 87.5 85.8 88 87.25001 Q 88.5 88.700005 88.5 90.100006 Q 88.100006 92.3 85.55 95.450005 Q 83 98.600006 78.9 100.600006 Q 76.7 101.3 74.1 101.200005 Q 71.5 101.100006 69.8 99.90001 Q 67.9 99.100006 67.3 100.15001 Q 66.7 101.200005 66.2 105.200005 Q 65.8 109.00001 66.8 110.75001 Q 67.8 112.50001 69.5 112.80001 Q 71.5 113.200005 72.65 113.350006 Q 73.8 113.50001 75.5 112.50001 Q 77.1 111.50001 77.5 111.350006 Q 77.9 111.200005 78.15 110.950005 Q 78.4 110.700005 79.4 109.700005 Q 80.1 109.00001 80.5 108.65001 Q 80.9 108.30001 81.4 108.30001 Q 81.9 108.30001 82.3 108.75001 Q 82.7 109.200005 83.100006 109.40001 Q 84.100006 109.40001 83.55 110.600006 Q 83 111.80001 81.4 113.450005 Q 79.8 115.100006 77.6 116.50001 ZM 77.5 95.3 Q 78.6 94.8 79.8 93.850006 Q 81 92.90001 81.85 91.75001 Q 82.7 90.600006 82.7 89.8 Q 82.7 88.40001 81.4 87.45001 Q 80.1 86.50001 77.5 87.20001 Q 76.4 87.50001 75 88.65001 Q 73.6 89.8 72.35 91.200005 Q 71.1 92.600006 70.35 93.700005 Q 69.6 94.8 69.8 95.00001 Q 70.1 95.50001 71.5 95.75001 Q 72.9 96.00001 74.65 95.90001 Q 76.4 95.8 77.5 95.3 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "243.02614" } as React.CSSProperties}
|
|
/>
|
|
<path
|
|
d="M 103.4 118.90001 Q 100.5 119.40001 98.1 118.55001 Q 95.7 117.700005 94.25 115.65001 Q 92.8 113.600006 92.8 110.40001 Q 92.5 107.40001 93.5 103.450005 Q 94.5 99.50001 96.45 95.50001 Q 98.4 91.50001 100.7 88.600006 Q 102.7 86.20001 104.7 84.20001 Q 106.7 82.20001 108.3 81.50001 Q 109.7 80.90001 110.95 80.75001 Q 112.2 80.600006 113 80.600006 Q 114.600006 81.00001 116.45 82.05 Q 118.3 83.100006 118.3 84.3 Q 118.3 84.3 118.55 84.55 Q 118.8 84.8 118.8 84.8 Q 119.4 84.8 119.850006 86.100006 Q 120.3 87.40001 120.4 89.05 Q 120.5 90.700005 119.9 91.8 Q 119.5 93.700005 118.5 95.100006 Q 117.5 96.50001 116.7 96.50001 Q 116.3 96.50001 115.95 96.55 Q 115.600006 96.600006 115.600006 97.100006 Q 115.600006 97.600006 115.05 97.50001 Q 114.5 97.40001 113.9 96.850006 Q 113.3 96.3 113 95.50001 Q 113 95.00001 113.4 93.8 Q 113.8 92.600006 114.2 90.700005 Q 114.8 87.90001 114.1 87.05 Q 113.4 86.20001 111.4 87.00001 Q 108.9 88.40001 106.65 90.90001 Q 104.4 93.40001 102.5 97.350006 Q 100.6 101.3 99.1 107.200005 Q 98.5 109.50001 98.65 111.200005 Q 98.8 112.90001 99.1 113.00001 Q 100.5 113.40001 102.9 113.15001 Q 105.3 112.90001 106.4 112.30001 Q 108 111.50001 110 110.15001 Q 112 108.80001 113.5 107.700005 Q 114 107.40001 114.7 106.700005 Q 115.4 106.00001 116.2 105.600006 Q 117 104.40001 117.600006 104.200005 Q 118.2 104.00001 119.4 104.00001 Q 120.2 104.200005 120.9 104.600006 Q 121.600006 105.00001 121.850006 105.40001 Q 122.100006 105.80001 121.5 106.100006 Q 121.100006 106.100006 121.05 106.350006 Q 121 106.600006 121 106.600006 Q 121.2 107.00001 120.15 108.25001 Q 119.100006 109.50001 117.5 111.00001 Q 115.9 112.50001 114.45 113.55001 Q 113 114.600006 112.4 114.600006 Q 111.4 114.600006 111.4 115.200005 Q 111.4 115.40001 109.95 116.200005 Q 108.5 117.00001 106.65 117.80001 Q 104.8 118.600006 103.4 118.90001 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "197.86472" } as React.CSSProperties}
|
|
/>
|
|
<path
|
|
d="M 131.6 114.600006 Q 130.9 114.700005 130.15 114.55001 Q 129.4 114.40001 128.7 113.90001 Q 127.9 113.100006 127.6 112.65001 Q 127.3 112.200005 127.45 111.200005 Q 127.6 110.200005 128.1 108.100006 Q 128.6 106.50001 129.3 103.65001 Q 130 100.8 130.8 98.00001 Q 131.1 96.40001 131.65 94.700005 Q 132.2 93.00001 132.8 91.55 Q 133.4 90.100006 133.7 89.3 Q 134.5 86.50001 135.25 84.40001 Q 136 82.3 137.1 79.55 Q 138.2 76.8 139.8 72.20001 Q 142 66.20001 143.15 63.050007 Q 144.3 59.900005 144.85 58.45001 Q 145.4 57.000008 145.6 56.20001 Q 145.6 55.40001 146.05 55.000008 Q 146.5 54.600006 147.2 54.600006 Q 148.6 54.600006 149.45 55.950005 Q 150.3 57.300007 150.5 59.150005 Q 150.7 61.000008 149.9 62.600006 Q 148.3 66.20001 146.5 71.15001 Q 144.7 76.100006 143 80.850006 Q 141.3 85.600006 139.8 88.90001 Q 139.8 89.3 139.5 90.3 Q 139.2 91.3 138.8 92.100006 Q 138.4 92.90001 138.05 93.600006 Q 137.7 94.3 137.7 94.3 Q 137.7 94.700005 137.4 95.8 Q 137.1 96.90001 136.6 98.50001 Q 136.2 99.700005 135.65 101.600006 Q 135.1 103.50001 134.9 104.80001 Q 135.4 103.90001 137 102.100006 Q 138.6 100.3 140 99.00001 Q 141.6 97.600006 143.6 95.90001 Q 145.6 94.200005 146.8 93.40001 Q 148 92.600006 148.95 91.950005 Q 149.9 91.3 149.9 91.3 Q 149.9 90.90001 150.25 90.850006 Q 150.6 90.8 151 90.8 Q 151.4 90.8 151.45 90.700005 Q 151.5 90.600006 151.5 90.200005 Q 151.5 89.700005 152.65 89.3 Q 153.8 88.90001 155.35 88.65001 Q 156.9 88.40001 157.9 88.40001 Q 159.1 88.40001 159.8 88.90001 Q 160.5 89.40001 161.6 91.100006 Q 162.8 92.700005 163.15 94.950005 Q 163.5 97.200005 162.7 99.600006 Q 162.7 100.40001 162.45 101.850006 Q 162.2 103.3 162.2 104.90001 L 161.6 108.100006 L 163.2 108.100006 Q 164 108.100006 164.7 108.350006 Q 165.4 108.600006 165.4 108.600006 Q 165.8 109.00001 166.2 109.350006 Q 166.6 109.700005 167 109.700005 Q 168.2 109.700005 167.9 110.65001 Q 167.6 111.600006 166.4 112.40001 Q 164 114.00001 162.05 114.00001 Q 160.1 114.00001 158.5 112.40001 Q 156.9 110.700005 156.5 108.600006 Q 156.1 106.50001 156.9 103.3 Q 157.3 98.90001 157.35 96.850006 Q 157.4 94.8 156.3 94.8 Q 155.3 94.8 152.8 96.15001 Q 150.3 97.50001 147.2 99.8 Q 144.1 102.100006 141.1 104.90001 Q 138.1 107.700005 136.1 110.700005 Q 134.9 112.200005 133.8 113.350006 Q 132.7 114.50001 131.6 114.600006 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "260.79596" } as React.CSSProperties}
|
|
/>
|
|
<path
|
|
d="M 181.29999 118.50001 Q 180 118.50001 179.25 118.00001 Q 178.5 117.50001 177.4 116.600006 Q 175.5 114.600006 174.7 112.75001 Q 173.9 110.90001 174.2 109.200005 Q 174.5 108.40001 174.45 107.65001 Q 174.4 106.90001 174.4 106.90001 Q 173.9 106.40001 174.09999 106.25001 Q 174.29999 106.100006 174.5 105.700005 Q 175.09999 105.700005 174.9 104.600006 Q 174.7 103.8 175.7 101.100006 Q 176.7 98.40001 178.2 96.00001 Q 178.79999 95.00001 180 93.350006 Q 181.2 91.700005 182.65 90.05 Q 184.09999 88.40001 185.29999 87.40001 Q 187.79999 85.3 189.7 84.3 Q 191.59999 83.3 193.79999 82.8 Q 196 82.3 196.84999 82.3 Q 197.7 82.3 199.2 83.90001 Q 201.5 84.90001 202.54999 86.3 Q 203.59999 87.70001 203.9 90.40001 Q 204.2 93.40001 203.45 97.25001 Q 202.7 101.100006 198.7 106.80001 Q 196.2 110.40001 194.09999 112.15001 Q 192 113.90001 189.09999 115.600006 Q 187 117.00001 185.29999 117.65001 Q 183.59999 118.30001 181.29999 118.50001 ZM 190.9 107.90001 Q 193.29999 105.200005 194.75 102.8 Q 196.2 100.40001 197.5 96.700005 Q 197.9 95.600006 198 93.950005 Q 198.09999 92.3 197.95 90.850006 Q 197.79999 89.40001 197.2 89.200005 Q 196 88.50001 194.29999 88.75001 Q 192.59999 89.00001 190.59999 90.700005 Q 187.5 93.3 185.2 97.15001 Q 182.9 101.00001 180.7 105.90001 Q 179.2 109.50001 180.04999 111.65001 Q 180.9 113.80001 183.75 113.15001 Q 186.59999 112.50001 190.9 107.90001 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "217.35109" } as React.CSSProperties}
|
|
/>
|
|
<path
|
|
d="M 227.3 116.50001 Q 225.2 118.30001 222.45 118.600006 Q 219.7 118.90001 217.09999 117.75001 Q 214.5 116.600006 212.8 114.200005 Q 211.09999 112.00001 210.59999 109.15001 Q 210.09999 106.30001 210.5 101.700005 Q 210.8 97.8 213 93.850006 Q 215.2 89.90001 218.34999 86.8 Q 221.5 83.70001 224.59999 82.50001 Q 226.09999 81.50001 227.15 81.55 Q 228.2 81.600006 230.4 81.8 Q 232.7 82.100006 233.85 82.70001 Q 235 83.3 235.7 84.3 Q 237.2 85.8 237.7 87.25001 Q 238.2 88.700005 238.2 90.100006 Q 237.8 92.3 235.25 95.450005 Q 232.7 98.600006 228.59999 100.600006 Q 226.4 101.3 223.8 101.200005 Q 221.2 101.100006 219.5 99.90001 Q 217.59999 99.100006 217 100.15001 Q 216.4 101.200005 215.9 105.200005 Q 215.5 109.00001 216.5 110.75001 Q 217.5 112.50001 219.2 112.80001 Q 221.2 113.200005 222.34999 113.350006 Q 223.5 113.50001 225.2 112.50001 Q 226.8 111.50001 227.2 111.350006 Q 227.59999 111.200005 227.84999 110.950005 Q 228.09999 110.700005 229.09999 109.700005 Q 229.8 109.00001 230.2 108.65001 Q 230.59999 108.30001 231.09999 108.30001 Q 231.59999 108.30001 232 108.75001 Q 232.4 109.200005 232.8 109.40001 Q 233.8 109.40001 233.25 110.600006 Q 232.7 111.80001 231.09999 113.450005 Q 229.5 115.100006 227.3 116.50001 ZM 227.2 95.3 Q 228.3 94.8 229.5 93.850006 Q 230.7 92.90001 231.55 91.75001 Q 232.4 90.600006 232.4 89.8 Q 232.4 88.40001 231.09999 87.45001 Q 229.8 86.50001 227.2 87.20001 Q 226.09999 87.50001 224.7 88.65001 Q 223.3 89.8 222.05 91.200005 Q 220.8 92.600006 220.05 93.700005 Q 219.3 94.8 219.5 95.00001 Q 219.8 95.50001 221.2 95.75001 Q 222.59999 96.00001 224.34999 95.90001 Q 226.09999 95.8 227.2 95.3 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "243.02614" } as React.CSSProperties}
|
|
/>
|
|
<path
|
|
d="M 248.3 120.40001 Q 246.4 119.600006 244.7 118.25001 Q 243 116.90001 242.5 116.00001 Q 242.5 115.100006 242.8 114.75001 Q 243.09999 114.40001 244.55 114.450005 Q 246 114.50001 249.3 114.90001 Q 250.5 114.90001 252.3 114.700005 Q 254.09999 114.50001 255.65 114.100006 Q 257.2 113.700005 257.4 113.100006 Q 257.9 113.100006 257.6 112.75001 Q 257.3 112.40001 256.9 112.00001 Q 256.5 112.00001 256 111.65001 Q 255.5 111.30001 255.09999 111.30001 Q 255.09999 110.80001 254.15 110.15001 Q 253.2 109.50001 252.2 109.100006 Q 250 107.30001 248.4 105.850006 Q 246.8 104.40001 247.2 103.90001 Q 247.2 103.50001 247.2 103.450005 Q 247.2 103.40001 247.2 103.40001 Q 246.5 103.40001 245.65 101.40001 Q 244.8 99.40001 244.8 97.8 Q 244.8 96.600006 245.5 94.75001 Q 246.2 92.90001 247.4 90.90001 Q 248.59999 88.90001 249.9 87.600006 Q 251.7 85.90001 254.4 83.95001 Q 257.1 82.00001 259.75 80.45001 Q 262.4 78.90001 264.2 78.40001 Q 266 77.70001 267.55 77.70001 Q 269.1 77.70001 270.3 78.40001 Q 271.3 78.90001 272.15 79.850006 Q 273 80.8 273.65 81.75001 Q 274.3 82.70001 274.5 83.40001 Q 274.5 84.600006 274.3 86.05 Q 274.1 87.50001 273.75 88.600006 Q 273.4 89.700005 272.7 89.700005 Q 272.7 89.700005 272.45 89.75001 Q 272.2 89.8 272.2 90.3 Q 272.2 91.3 270.7 92.600006 Q 268.8 93.90001 267.4 94.15001 Q 266 94.40001 265.7 93.100006 Q 265.4 92.700005 265.3 92.40001 Q 265.2 92.100006 264.8 92.100006 Q 264.8 92.100006 264.5 91.8 Q 264.2 91.50001 264.2 90.8 Q 264.2 90.40001 264.5 90.05 Q 264.8 89.700005 264.8 89.700005 Q 265.3 89.700005 266.1 88.55 Q 266.9 87.40001 267.55 86.05 Q 268.2 84.70001 268.2 84.20001 Q 268.2 83.600006 268.05 83.50001 Q 267.9 83.40001 267.1 83.40001 Q 265.7 84.00001 263.7 85.00001 Q 261.7 86.00001 259.95 86.95001 Q 258.2 87.90001 257.4 88.700005 Q 257 89.40001 256.9 89.55 Q 256.8 89.700005 256.4 89.700005 Q 256.4 89.3 255.75 90.05 Q 255.09999 90.8 254.15 92.100006 Q 253.2 93.40001 252.34999 94.65001 Q 251.5 95.90001 251.09999 96.50001 Q 250.9 96.700005 250.65 97.65001 Q 250.4 98.600006 250.4 99.40001 Q 250 100.600006 250.5 101.05 Q 251 101.50001 252.7 102.90001 Q 256.2 105.50001 258.2 107.200005 Q 260.2 108.90001 261.2 110.00001 Q 262.2 111.100006 262.4 112.00001 Q 264.2 115.00001 263.5 116.600006 Q 262.8 118.200005 260.1 119.40001 Q 259.1 119.90001 256.8 120.200005 Q 254.5 120.50001 252.09999 120.55001 Q 249.7 120.600006 248.3 120.40001 Z"
|
|
fill="currentColor"
|
|
style={{ "--path-length": "200.88203" } as React.CSSProperties}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|