如何制作填充轮廓的动画

问题描述 投票:0回答:1

我试图制作类似此网站的预加载动画的东西。我尝试过聊天 gpt,但他给了我一些奇怪的东西,而不是填充 svg,它只是在其顶部放了一个黑色方块。 理想情况下,动画应该持续大约 2 到 3 秒,我非常接近得到它,但堆栈溢出不允许我发布我的尝试,因为我有不成比例的代码量。 我这里有一个 svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1795 236" xmlns="http://www.w3.org/2000/svg" xmlns:v="https://svgstorm.com">
<g fill-opacity=".02" stroke="None">
<path d="m0 236h1795v-236h-66c17.64 6.18 37.7 16.29 42.71 37.3s5.06 62.29 4.29 91.7 2.17 57.49-11.71 76.3c-13.89 18.81-30.33 25.07-54.29 25.7-23.96 0.64-46.95-5.29-60.7-23.3-13.74-18.02-11.84-48.21-12.3-77.7s-0.29-70.4 4.21-92.23 25.06-30.97 42.79-37.77h-1085c8.1 5.64 21.88 7.56 30.08 19.92 8.21 12.36 9.6 14.93 11.85 31.16 2.26 16.23 2.07 43.88 2.07 62.92s0.11 46.61-1.78 63.22c-1.89 16.62-4.49 20.78-13.32 32.68-8.83 11.91-20.39 15.58-31.15 18.3-10.75 2.71-33.39 5.45-45 1.6s-22.66-7.16-31.85-18.7-12.27-16.21-14.22-33.78c-1.96-17.57-2.35-46.03-1.68-65.32s0.12-44.28 1.93-61.07c1.81-16.8 4.34-19.52 13.31-31.7 8.96-12.18 20-14.72 31.76-19.23h-551v236m119-125c15.64 8.05 22.82 15.33 22.78 37.22s2.13 56.75-1.78 78.78c-17.7-0.02-38.32-0.02-56 0-2.3-14.21-0.48-33.97-1-50s1.51-34.11-3-47c-2.61 0.55-5.35-1.27-9-2 0.02 32.53-0.03 66.19 0 98-19.63 1.67-43.47 1.64-63 0 0.24-24.05-0.3-49.18 0-74s-0.54-52.3 0-77-2.04-50.78 2-73c18.44 0.36 45.35-0.52 63.25 0.2 17.89 0.72 31.86 2.05 43.05 7.51 11.19 5.47 19.52 15.4 22.41 26.59 2.89 11.18 3.92 33.64 2.08 46.93s-7.41 24.54-21.79 27.77m98-109c4.1 9.42 1.51 21.75 2 34s-0.2 26.42 0 39-0.06 26.37 0 39 0.06 26.57 0 39 0.93 23.11 1 34c2.76 2.89 5.3 0.8 8 1 1.81-9.99 1.45-18.79 2-31s-0.34-27.35 0-40-0.35-26.25 0-39-0.59-27.42 0-40-2.18-26.19 2-36c11.57 1.7 23.99 1.16 36 1s26.81-3.62 25 11 0.89 24.64 0 38 0.52 24.41 0 37 0.51 26.08 0 38 0.84 27.24 0 38-0.97 17.39-2.2 25.25-5.41 10.1-9.04 16.52c-3.62 6.42-10.33 12.71-16.06 15.94-5.74 3.24-10.45 4.28-16.62 6.42s-17.19 1.77-26.08 1.87-16.72-0.73-24.7-3.31c-7.97-2.58-8.44-3.44-15.6-7.4-7.16-3.97-9.03-5.3-16-13.99s-10.68-25-9.7-41.3-0.27-23.58 0-38 0.26-24.29 0-38 1.01-23.22 0-37 2.35-23.34 0-38 10.4-11.05 23-11 24.93 0.78 37-1m169 0c4.92 12.85 5.33 26.69 7.66 40.68s3.39 25.96 5.34 40.32c5.7-27.99 5.78-54.54 12-81 25.07 1.33 55.51-2.64 79 2-0.67 73.41 1.34 149.34-1 223-17.05-0.06-36.97 0.01-54 0-3-32.67 1-67.74-2-100-4.49 34.03-7.52 68.31-14 100-12.05-0.04-26.96-0.04-39 0-7.05-35.2-8.76-65.57-16-101-0.66 33.58 1.33 67.87-1 101-17.33-0.67-38.06 1.29-55-1v-222c10.81-2.5 25.19-0.26 38-1s27.52 1.38 40-1m667 48c-10.49 4.76-26.95 0.62-40 2v36h35c1.63 15.14 1.63 31.85 0 47h-35c0.02 30.19-0.03 61.53 0 91-19.36 2.34-42.33 0.28-62 1-2.34-72.99-0.32-149.73-1-223 9.97-1.85 24.1-1.16 36-1s27.36-0.78 39 0 28.1-5.48 27 8 0 26.1 1 39m67-48c4.1 9.42 1.51 21.75 2 34s-0.2 26.42 0 39-0.06 26.37 0 39 0.06 26.57 0 39 0.93 23.11 1 34c2.76 2.89 5.3 0.8 8 1 1.81-9.99 1.45-18.79 2-31s-0.34-27.35 0-40-0.35-26.25 0-39-0.59-27.42 0-40-2.18-26.19 2-36c11.57 1.7 23.99 1.16 36 1s26.81-3.62 25 11 0.89 24.64 0 38 0.52 24.41 0 37 0.51 26.08 0 38 0.84 27.24 0 38-0.97 17.39-2.2 25.25-5.41 10.1-9.04 16.52c-3.62 6.42-10.33 12.71-16.06 15.94-5.74 3.24-10.45 4.28-16.62 6.42s-17.19 1.77-26.08 1.87-16.73-0.73-24.7-3.31-8.45-3.44-15.6-7.4c-7.16-3.97-9.03-5.31-16-13.99-6.97-8.69-10.68-25-9.7-41.3s-0.27-23.58 0-38 0.26-24.29 0-38 1.01-23.22 0-37 2.35-23.34 0-38 10.4-11.05 23-11 24.93 0.78 37-1m212 2c-0.03 14.71-0.03 32.31 0 47-10.83 2.3-22.75 0.36-34 1-0.66 58.13 1.32 117.89-1 175-19.38 0-41.61-0.05-61 0-0.01-57.5 0.01-116.81 0-175-10.59 0.64-21.86-1.29-32 1-3.01-6.01-3-18.79-2-27s-4.92-23.4 5.03-23.02c9.94 0.38 21.71-0.19 31.97 0.02 10.27 0.21 21.68-0.22 32 0s21.86-0.37 32 0 20.91-1.28 29 1m67-2c4.1 9.42 1.51 21.75 2 34s-0.2 26.42 0 39-0.05 26.37 0 39 0.06 26.57 0 39 0.93 23.11 1 34c2.76 2.89 5.3 0.8 8 1 1.81-9.99 1.45-18.79 2-31s-0.34-27.35 0-40-0.35-26.25 0-39-0.59-27.42 0-40-2.18-26.19 2-36c11.57 1.7 23.99 1.16 36 1s26.81-3.62 25 11 0.89 24.64 0 38 0.52 24.41 0 37 0.51 26.08 0 38 0.84 27.24 0 38-0.97 17.39-2.2 25.25-5.41 10.1-9.04 16.52c-3.62 6.42-10.33 12.71-16.06 15.94-5.74 3.24-10.45 4.28-16.62 6.42s-17.19 1.77-26.08 1.87-16.72-0.73-24.7-3.31c-7.97-2.58-8.44-3.44-15.6-7.4-7.16-3.97-9.03-5.3-16-13.99s-10.68-25-9.7-41.3-0.27-23.58 0-38 0.26-24.29 0-38 1.01-23.22 0-37 2.35-23.34 0-38 10.4-11.05 23-11 24.93 0.78 37-1m202 109c15.64 8.05 22.82 15.33 22.78 37.22s2.13 56.75-1.78 78.78c-17.7-0.02-38.32-0.02-56 0-2.3-14.21-0.48-33.97-1-50s1.51-34.11-3-47c-2.61 0.55-5.35-1.27-9-2 0.02 32.53-0.02 66.19 0 98-19.36 2.34-42.33 0.28-62 1-1.8-23.76-1.02-49.14-1-74s-0.41-52.19 0-77-1.95-51.61 2-74c18.44 0.36 45.35-0.53 63.25 0.2 17.89 0.72 31.86 2.05 43.05 7.51 11.19 5.47 19.52 15.4 22.41 26.59 2.89 11.18 3.92 33.64 2.08 46.93s-7.41 24.54-21.79 27.77m-694-106c2.19 16.35 0.63 35.55 1 54s-0.27 38.27 0 57-0.35 38.16 0 57-1.09 38.59 1 57c-13.03 3.16-31.53-1.1-46 2-2.18-13.41-0.67-29.47-1-45s0.17-32.13 0-48 0.13-33.02 0-49c-41.48 47.69-83.78 94.09-125 142-16.76-1.62-35.27-1.69-52 0-1.88-1.73-1.1-3.04-2-5 51.5-57.3 103.25-115.92 155-175-51.24 0.67-103.2-1.33-154 1-3.16-13.02 1.1-31.53-2-46 16.35-2.19 35.54-0.63 54-1s38.27 0.27 57 0 38.16 0.34 57 0 38.59 1.09 57-1z"/>
</g>
<g fill-opacity=".91" stroke="None">
<path d="m599 0h-48c-11.76 4.51-22.8 7.05-31.76 19.23-8.97 12.18-11.5 14.9-13.31 31.7-1.81 16.79-1.26 41.78-1.93 61.07s-0.28 47.75 1.68 65.32c1.95 17.57 5.03 22.24 14.22 33.78s20.24 14.85 31.85 18.7 34.25 1.11 45-1.6c10.76-2.72 22.32-6.39 31.15-18.3 8.83-11.9 11.43-16.06 13.32-32.68 1.89-16.61 1.78-44.18 1.78-63.22s0.19-46.69-2.07-62.92c-2.25-16.23-3.64-18.8-11.85-31.16-8.2-12.36-21.98-14.28-30.08-19.92m-18 3c15.33 2.75 25.05 4.25 35.1 12.91 10.05 8.65 16.49 16.23 18.7 30.34 2.2 14.11 1.73 40.22 2.2 58.75s-0.27 47.9-1.78 65.22c-1.5 17.33-1.63 23.1-10.81 34.53-9.17 11.43-18.52 15.66-30.66 19.05s-35.13 1.18-46.05-2.51c-10.93-3.7-22.81-10.02-29.4-21.59-6.59-11.58-6.43-24.82-8.23-43.77-1.79-18.96 1.13-49.75 0.93-67.93s0.07-38.18 4.26-50.75c4.2-12.57 12.7-20.47 23.49-25.64s24.73-11.75 42.25-8.61z"/>
</g>
<g fill-opacity=".91" stroke="None">
<path d="m1729 0h-45c-17.73 6.8-38.29 15.94-42.79 37.77s-4.67 62.74-4.21 92.23-1.44 59.68 12.3 77.7c13.75 18.01 36.74 23.94 60.7 23.3 23.96-0.63 40.4-6.89 54.29-25.7 13.88-18.81 10.94-46.89 11.71-76.3s0.72-70.69-4.29-91.7-25.07-31.12-42.71-37.3m-15 3c15.33 2.75 25.05 4.25 35.1 12.91 10.05 8.65 16.49 16.23 18.7 30.34 2.2 14.11 1.73 40.22 2.2 58.75s-0.28 47.89-1.78 65.22-1.63 23.1-10.81 34.53c-9.17 11.43-18.52 15.66-30.66 19.05s-35.13 1.18-46.05-2.51c-10.93-3.7-22.81-10.02-29.4-21.59-6.59-11.58-6.43-24.82-8.23-43.77-1.79-18.96 1.12-49.75 0.93-67.93s0.07-38.18 4.26-50.75c4.2-12.57 12.7-20.48 23.49-25.64 10.79-5.17 24.73-11.75 42.25-8.61z"/>
</g>
<g fill-opacity=".95" stroke="None">
<path d="m119 111c14.38-3.23 19.95-14.48 21.79-27.77s0.81-35.75-2.08-46.93c-2.89-11.19-11.22-21.12-22.41-26.59-11.19-5.46-25.16-6.79-43.05-7.51-17.9-0.72-44.81 0.16-63.25-0.2-4.04 22.22-1.46 48.3-2 73s0.3 52.18 0 77 0.24 49.95 0 74c19.53 1.64 43.37 1.67 63 0-0.03-31.81 0.02-65.47 0-98 3.65 0.73 6.39 2.55 9 2 4.51 12.89 2.48 30.97 3 47s-1.3 35.79 1 50c17.68-0.02 38.3-0.02 56 0 3.91-22.03 1.74-56.89 1.78-78.78s-7.14-29.17-22.78-37.22m17 110h-48c0.53-21.04-1.05-49.23 0.78-69.22 1.83-20-4.68-32.19-23.78-27.78 0.03 31.5-0.02 64.81 0 97h-51v-213c11.72-0.63 25.48 0.84 37 0s24.2 0.99 34.22 1.78 16.51 0.48 23.08 2.93c6.58 2.45 11.52 4.05 15.89 10.54s8.23 9.55 9.12 17.45 3.59 17.78 2.69 27.3-1.2 18.45-3.35 24.7-6.96 11.55-13.9 12.1-17.27 6.32-7.85 9.32c9.42 2.99 10.15 3.01 17.8 10.18 7.64 7.17 4.13 10.88 6.3 21.7 2.16 10.83 0.62 25.26 1 37s-0.29 25.11 0 37z"/>
</g>
<g fill-opacity=".96" stroke="None">
<path d="m217 2c-12.07 1.78-24.4 1.05-37 1s-25.35-3.66-23 11-1.01 24.22 0 38-0.26 23.29 0 37 0.27 23.58 0 38 0.98 21.7 0 38 2.73 32.61 9.7 41.3 8.84 10.02 16 13.99c7.16 3.96 7.63 4.82 15.6 7.4 7.98 2.58 15.81 3.41 24.7 3.31s19.91 0.27 26.08-1.87 10.88-3.18 16.62-6.42c5.73-3.23 12.44-9.52 16.06-15.94 3.63-6.42 7.81-8.66 9.04-16.52s1.36-14.49 2.2-25.25-0.51-26.08 0-38-0.52-25.41 0-38-0.89-23.64 0-37-1.81-23.38 0-38-12.99-11.16-25-11-24.43 0.7-36-1c-4.18 9.81-1.41 23.42-2 36s0.35 27.25 0 40 0.34 26.35 0 39 0.55 27.79 0 40-0.19 21.01-2 31c-2.7-0.2-5.24 1.89-8-1-0.07-10.89-1.06-21.57-1-34s0.06-26.37 0-39 0.2-26.42 0-39 0.49-26.75 0-39 2.1-24.58-2-34m-3 6v59c0 18.79 0.01 41.02 0 59s0.04 41.61-0.07 57.07c-0.11 15.47 20.37 15.7 20.47 0.18 0.09-15.53 0.97-38.08 0.6-56.25s0.19-40 0-59 0.14-40.75 0-60h52c-0.5 33.03 0.67 75.95 0 108s3.83 64.5-8.13 84.92-29.75 24.49-53.87 24.08-43.5-4.68-55.57-24.77-5.86-51.28-7.43-83.23 1.17-75.95 0-109h52z"/>
</g>
<g fill-opacity=".96" stroke="None">
<path d="m386 2c-12.48 2.38-27.19 0.26-40 1s-27.19-1.5-38 1v222c16.94 2.29 37.67 0.33 55 1 2.33-33.13 0.34-67.42 1-101 7.24 35.43 8.95 65.8 16 101 12.04-0.04 26.95-0.04 39 0 6.48-31.69 9.51-65.97 14-100 3 32.26-1 67.33 2 100 17.03 0.01 36.95-0.06 54 0 2.34-73.66 0.33-149.59 1-223-23.49-4.64-53.93-0.67-79-2-6.22 26.46-6.3 53.01-12 81-1.95-14.36-3.01-26.33-5.34-40.32s-2.74-27.83-7.66-40.68m-3 6c3.35 33.34 10.28 66.16 13 99 2.87 1.55 4.07 1.48 7 0 0.33-5.77 0.41-10.67 1.35-17.69 0.94-7.03 2.69-14.91 3.32-21.98 0.62-7.08 1.97-16.45 3.32-23.34 1.36-6.89-0.56-11.12 1.81-17.24s-2.61-18.72 7.2-18.75c9.81-0.02 21.78 0.01 32 0s21.67 0.01 32 0v213h-45c0.65-47.12-1.31-95.99 1-142-2.87-1.55-4.07-1.48-7 0-4.59 47.49-12.6 94.53-18 142h-31c-5.2-47.01-14.13-93.37-19-139-2.88-1.55-4.07-1.48-7 0 2.33 45.13 0.34 92.87 1 139h-45v-213h69z"/>
</g>
<g fill-opacity=".97" stroke="None">
<path d="m1053 50c-1-12.9-2.1-25.52-1-39s-15.36-7.22-27-8-27.1 0.16-39 0-26.03-0.85-36 1c0.68 73.27-1.34 150.01 1 223 19.67-0.72 42.64 1.34 62-1-0.03-29.47 0.02-60.81 0-91h35c1.63-15.15 1.63-31.86 0-47h-35v-36c13.05-1.38 29.51 2.76 40-2m-6-42v39c-13.21 0.19-27.59-0.27-40 0 0.05 14.43 0.04 31.56 0 46 11.09 0.32 24.12-0.23 36 0v37c-11.89 0.23-24.91-0.32-36 0 0.05 29.5-0.04 60.8 0 91h-51v-213h91z"/>
</g>
<g fill-opacity=".96" stroke="None">
<path d="m1120 2c-12.07 1.78-24.4 1.05-37 1s-25.35-3.66-23 11-1.01 24.22 0 38-0.26 23.29 0 37 0.27 23.58 0 38 0.98 21.7 0 38 2.73 32.61 9.7 41.3c6.97 8.68 8.84 10.02 16 13.99 7.15 3.96 7.63 4.82 15.6 7.4s15.81 3.41 24.7 3.31 19.91 0.27 26.08-1.87 10.88-3.18 16.62-6.42c5.73-3.23 12.44-9.52 16.06-15.94 3.63-6.42 7.81-8.66 9.04-16.52s1.36-14.49 2.2-25.25-0.51-26.08 0-38-0.52-25.41 0-38-0.89-23.64 0-37-1.81-23.38 0-38-12.99-11.16-25-11-24.43 0.7-36-1c-4.18 9.81-1.41 23.42-2 36s0.35 27.25 0 40 0.34 26.35 0 39 0.55 27.79 0 40-0.19 21.01-2 31c-2.7-0.2-5.24 1.89-8-1-0.07-10.89-1.06-21.57-1-34s0.06-26.37 0-39 0.2-26.42 0-39 0.49-26.75 0-39 2.1-24.58-2-34m-3 6v59c0 18.79 0.01 41.02 0 59s0.04 41.61-0.07 57.07c-0.11 15.47 20.37 15.7 20.47 0.18 0.1-15.53 0.97-38.08 0.6-56.25s0.19-40 0-59 0.14-40.75 0-60h52c-0.5 33.03 0.67 75.95 0 108s3.83 64.5-8.13 84.92-29.75 24.49-53.87 24.08-43.5-4.68-55.57-24.77-5.86-51.28-7.43-83.23 1.18-75.95 0-109h52z"/>
</g>
<g stroke="None">
<path d="m1332 4c-8.09-2.28-18.86-0.63-29-1s-21.68 0.22-32 0-21.73 0.21-32 0c-10.26-0.21-22.03 0.36-31.97-0.02-9.95-0.38-4.03 14.81-5.03 23.02s-1.01 20.99 2 27c10.14-2.29 21.41-0.36 32-1 0.01 58.19-0.01 117.5 0 175 19.39-0.05 41.62 0 61 0 2.32-57.11 0.34-116.87 1-175 11.25-0.64 23.17 1.3 34-1-0.03-14.69-0.03-32.29 0-47m-6 4v39c-11.23 0.25-23.56-0.35-34 0 0.01 57.16-0.01 116.14 0 174h-51c-0.67-58.24 1.33-117.2-1-175-10.5 2.29-22.08 0.36-33 1v-39h119z"/>
</g>
<g fill-opacity=".96" stroke="None">
<path d="m1399 2c-12.07 1.78-24.4 1.05-37 1s-25.35-3.66-23 11-1.01 24.22 0 38-0.26 23.29 0 37 0.27 23.58 0 38 0.98 21.7 0 38 2.73 32.61 9.7 41.3 8.84 10.02 16 13.99c7.16 3.96 7.63 4.82 15.6 7.4 7.98 2.58 15.81 3.41 24.7 3.31s19.91 0.27 26.08-1.87 10.88-3.18 16.62-6.42c5.73-3.23 12.44-9.52 16.06-15.94 3.63-6.42 7.81-8.66 9.04-16.52s1.36-14.49 2.2-25.25-0.51-26.08 0-38-0.52-25.41 0-38-0.89-23.64 0-37-1.81-23.38 0-38-12.99-11.16-25-11-24.43 0.7-36-1c-4.18 9.81-1.41 23.42-2 36s0.35 27.25 0 40 0.34 26.35 0 39 0.55 27.79 0 40-0.19 21.01-2 31c-2.7-0.2-5.24 1.89-8-1-0.07-10.89-1.06-21.57-1-34s0.05-26.37 0-39 0.2-26.42 0-39 0.49-26.75 0-39 2.1-24.58-2-34m-3 6v59c0 18.79 0.01 41.02 0 59s0.04 41.61-0.07 57.07c-0.11 15.47 20.37 15.7 20.47 0.18 0.09-15.53 0.97-38.08 0.6-56.25s0.19-40 0-59 0.14-40.75 0-60h52c-0.5 33.03 0.67 75.95 0 108s3.83 64.5-8.13 84.92-29.75 24.49-53.87 24.08-43.49-4.68-55.57-24.77-5.86-51.28-7.43-83.23 1.18-75.95 0-109h52z"/>
</g>
<g fill-opacity=".95" stroke="None">
<path d="m1601 111c14.38-3.23 19.95-14.48 21.79-27.77s0.81-35.75-2.08-46.93c-2.89-11.19-11.22-21.12-22.41-26.59-11.19-5.46-25.16-6.79-43.05-7.51-17.9-0.73-44.81 0.16-63.25-0.2-3.95 22.39-1.59 49.19-2 74s0.02 52.14 0 77-0.8 50.24 1 74c19.67-0.72 42.64 1.34 62-1-0.02-31.81 0.02-65.47 0-98 3.65 0.73 6.39 2.55 9 2 4.51 12.89 2.48 30.97 3 47s-1.3 35.79 1 50c17.68-0.02 38.3-0.02 56 0 3.91-22.03 1.74-56.89 1.78-78.78s-7.14-29.17-22.78-37.22m17 110h-48c0.53-21.04-1.05-49.23 0.78-69.22 1.83-20-4.68-32.19-23.78-27.78 0.03 31.49-0.02 64.81 0 97h-51v-213c11.72-0.63 25.48 0.84 37 0s24.2 0.99 34.22 1.78 16.51 0.49 23.08 2.93c6.58 2.45 11.52 4.05 15.89 10.54s8.23 9.55 9.12 17.45 3.59 17.78 2.69 27.3-1.21 18.45-3.35 24.7c-2.15 6.25-6.96 11.55-13.9 12.1-6.93 0.55-17.27 6.32-7.85 9.32 9.42 2.99 10.15 3.01 17.8 10.18 7.64 7.17 4.14 10.88 6.3 21.7 2.16 10.83 0.62 25.26 1 37s-0.29 25.11 0 37z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m581 3c-17.52-3.14-31.46 3.44-42.25 8.61s-19.29 13.07-23.49 25.64c-4.19 12.57-4.46 32.57-4.26 50.75s-2.72 48.97-0.93 67.93c1.8 18.95 1.64 32.19 8.23 43.77 6.59 11.57 18.47 17.89 29.4 21.59 10.92 3.69 33.91 5.9 46.05 2.51s21.49-7.62 30.66-19.05c9.18-11.43 9.31-17.2 10.81-34.53 1.51-17.32 2.25-46.69 1.78-65.22s0-44.64-2.2-58.75c-2.21-14.11-8.65-21.69-18.7-30.34-10.05-8.66-19.77-10.16-35.1-12.91m-11 32c13.71-3.6 14.88 7.97 15 21 0.13 13.03 1.82 37.3 1 52s0.89 37.75 0 52 2.05 29.99-9.75 33.4c-11.79 3.42-15.94-7.75-15.25-21.4s1.3-37.45 1-52 0.07-38.81 0-52-3.32-30.03 8-33z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m1714 3c-17.52-3.14-31.46 3.44-42.25 8.61-10.79 5.16-19.29 13.07-23.49 25.64-4.19 12.57-4.45 32.57-4.26 50.75s-2.72 48.97-0.93 67.93c1.8 18.95 1.64 32.19 8.23 43.77 6.59 11.57 18.47 17.89 29.4 21.59 10.92 3.69 33.91 5.9 46.05 2.51s21.49-7.62 30.66-19.05c9.18-11.43 9.31-17.2 10.81-34.53s2.25-46.69 1.78-65.22 0-44.64-2.2-58.75c-2.21-14.11-8.65-21.69-18.7-30.34-10.05-8.66-19.77-10.16-35.1-12.91m-11 32c13.71-3.6 14.88 7.97 15 21 0.13 13.03 1.82 37.3 1 52s0.89 37.75 0 52 2.05 29.99-9.75 33.4c-11.79 3.42-15.94-7.75-15.25-21.4s1.3-37.45 1-52 0.07-38.81 0-52-3.32-30.03 8-33z"/>
</g>
<g fill-opacity=".95" stroke="None">
<path d="m907 5c-18.41 2.09-38.16 0.66-57 1s-38.27-0.27-57 0-38.54-0.37-57 0-37.65-1.19-54 1c3.1 14.47-1.16 32.98 2 46 50.8-2.33 102.76-0.33 154-1-51.75 59.08-103.5 117.7-155 175 0.9 1.96 0.12 3.27 2 5 16.73-1.69 35.24-1.62 52 0 41.22-47.91 83.52-94.31 125-142 0.13 15.98-0.17 33.13 0 49s-0.33 32.47 0 48-1.18 31.59 1 45c14.47-3.1 32.97 1.16 46-2-2.09-18.41-0.65-38.16-1-57s0.27-38.27 0-57 0.37-38.55 0-57 1.19-37.65-1-54m-3 5v217h-38c-0.28-24.34 0.38-50.88 0-75s1.17-49.62-1-71c-6.7 2.39-10.79 12.08-17.25 17.75-6.47 5.67-10.35 12.12-16.98 18.02s-9.59 13.4-16.36 18.98c-6.76 5.58-8.89 12.93-15.21 18.5-6.32 5.56-11.73 12.36-16.46 18.5s-12.31 12.48-17.45 18.55c-5.14 6.08-9.68 13.36-16.05 18.95-6.36 5.58-8.61 15.08-18.24 16.75-9.64 1.66-29.44-1.24-40 0 8.32-9.01 14.38-18.14 22.39-26.75 8.02-8.62 15.61-16.62 22.74-25.17s15.15-16.86 22.06-25.33 17.16-16.85 23.4-25.5c6.24-8.66 15.98-16.31 22.66-25s15.49-17.14 22.5-25.5 18.97-17.03 17.25-26.75c-51.83 2.33-104.75 0.33-157 1v-38h217z"/>
</g>
<g fill-opacity=".01" stroke="None">
<path d="m136 220c-0.29-11.89 0.38-25.26 0-37s1.16-26.17-1-37c-2.17-10.82 1.34-14.53-6.3-21.7-7.65-7.17-8.38-7.19-17.8-10.18-9.42-3 0.91-8.77 7.85-9.32s11.75-5.85 13.9-12.1 2.45-15.18 3.35-24.7-1.8-19.4-2.69-27.3-4.75-10.96-9.12-17.45-9.31-8.09-15.89-10.54c-6.57-2.45-13.06-2.14-23.08-2.93s-22.7-2.62-34.22-1.78-25.28-0.63-37 0v213h51c-0.02-32.19 0.03-65.5 0-97 19.1-4.41 25.61 7.78 23.78 27.78-1.83 19.99-0.25 48.18-0.78 69.22h48m-71-128c-0.01-16.39 0.07-35.6 0-52 21.53-5.68 23.2 12.04 23 29s-4.04 28.6-23 23z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m214 8h-52c1.17 33.05-1.57 77.05 0 109s-4.64 63.14 7.43 83.23 31.45 24.36 55.57 24.77 41.91-3.66 53.87-24.08 7.46-52.87 8.13-84.92-0.5-74.97 0-108h-52c0.14 19.25-0.19 41 0 60s-0.37 40.83 0 59-0.51 40.72-0.6 56.25c-0.1 15.52-20.58 15.29-20.47-0.18 0.11-15.46 0.06-39.09 0.07-57.07s0-40.21 0-59v-59z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m383 8h-69v213h45c-0.66-46.13 1.33-93.87-1-139 2.93-1.48 4.12-1.55 7 0 4.87 45.63 13.8 91.99 19 139h31c5.4-47.47 13.41-94.51 18-142 2.93-1.48 4.13-1.55 7 0-2.31 46.01-0.35 94.88-1 142h45v-213c-10.33 0.01-21.78-0.01-32 0s-22.19-0.02-32 0c-9.81 0.03-4.83 12.63-7.2 18.75s-0.45 10.35-1.81 17.24c-1.35 6.89-2.7 16.26-3.32 23.34-0.63 7.07-2.38 14.95-3.32 21.98-0.94 7.02-1.02 11.92-1.35 17.69-2.93 1.48-4.13 1.55-7 0-2.72-32.84-9.65-65.66-13-99z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m1047 8h-91v213h51c-0.04-30.2 0.05-61.5 0-91 11.09-0.32 24.11 0.23 36 0v-37c-11.88-0.23-24.91 0.32-36 0 0.04-14.44 0.05-31.57 0-46 12.41-0.27 26.79 0.19 40 0v-39z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m1117 8h-52c1.18 33.05-1.57 77.05 0 109s-4.64 63.14 7.43 83.23 31.45 24.36 55.57 24.77 41.91-3.66 53.87-24.08 7.46-52.87 8.13-84.92-0.5-74.97 0-108h-52c0.14 19.25-0.19 41 0 60s-0.37 40.83 0 59-0.5 40.72-0.6 56.25c-0.1 15.52-20.58 15.29-20.47-0.18 0.11-15.46 0.06-39.09 0.07-57.07s0-40.21 0-59v-59z"/>
</g>
<g fill-opacity=".01" stroke="None">
<path d="m1326 8h-119v39c10.92-0.64 22.5 1.29 33-1 2.33 57.8 0.33 116.76 1 175h51c-0.01-57.86 0.01-116.84 0-174 10.44-0.35 22.77 0.25 34 0v-39z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m1396 8h-52c1.18 33.05-1.57 77.05 0 109s-4.65 63.14 7.43 83.23 31.45 24.36 55.57 24.77 41.91-3.66 53.87-24.08 7.46-52.87 8.13-84.92-0.5-74.97 0-108h-52c0.14 19.25-0.19 41 0 60s-0.37 40.83 0 59-0.51 40.72-0.6 56.25c-0.1 15.52-20.58 15.29-20.47-0.18 0.11-15.46 0.06-39.09 0.07-57.07s0-40.21 0-59v-59z"/>
</g>
<g fill-opacity=".01" stroke="None">
<path d="m1618 220c-0.29-11.89 0.38-25.26 0-37s1.16-26.17-1-37c-2.16-10.82 1.34-14.53-6.3-21.7-7.65-7.17-8.38-7.19-17.8-10.18-9.42-3 0.92-8.77 7.85-9.32 6.94-0.55 11.75-5.85 13.9-12.1 2.14-6.25 2.45-15.18 3.35-24.7s-1.8-19.4-2.69-27.3-4.75-10.96-9.12-17.45-9.31-8.09-15.89-10.54c-6.57-2.44-13.06-2.14-23.08-2.93s-22.7-2.62-34.22-1.78-25.28-0.63-37 0v213h51c-0.02-32.19 0.03-65.51 0-97 19.1-4.41 25.61 7.78 23.78 27.78-1.83 19.99-0.25 48.18-0.78 69.22h48m-71-128c-0.01-16.39 0.07-35.6 0-52 21.53-5.68 23.2 12.04 23 29s-4.04 28.6-23 23z"/>
</g>
<g fill-opacity=".02" stroke="None">
<path d="m904 10h-217v38c52.25-0.67 105.17 1.33 157-1 1.72 9.72-10.24 18.39-17.25 26.75s-15.82 16.81-22.5 25.5-16.42 16.34-22.66 25c-6.24 8.65-16.49 17.03-23.4 25.5s-14.93 16.78-22.06 25.33-14.72 16.55-22.74 25.17c-8.01 8.61-14.07 17.74-22.39 26.75 10.56-1.24 30.36 1.66 40 0 9.63-1.67 11.88-11.17 18.24-16.75 6.37-5.59 10.91-12.87 16.05-18.95 5.14-6.07 12.72-12.41 17.45-18.55s10.14-12.94 16.46-18.5c6.32-5.57 8.45-12.92 15.21-18.5 6.77-5.58 9.73-13.08 16.36-18.98s10.51-12.35 16.98-18.02c6.46-5.67 10.55-15.36 17.25-17.75 2.17 21.38 0.62 46.88 1 71s-0.28 50.66 0 75h38v-217z"/>
</g>
<g fill-opacity=".91" stroke="None">
<path d="m570 35c-11.32 2.97-8.07 19.81-8 33s-0.3 37.45 0 52-0.31 38.35-1 52 3.46 24.82 15.25 21.4c11.8-3.41 8.86-19.15 9.75-33.4s-0.82-37.3 0-52-0.87-38.97-1-52c-0.12-13.03-1.29-24.6-15-21m-2 151c-0.15-22.21-0.58-49.94 0-74s-2.58-51.14 2-71c13.26 0.18 8.99 14.97 10 28s-0.36 33.3 0 47 0.05 33.93 0 47 1.01 30.08-12 23z"/>
</g>
<g fill-opacity=".91" stroke="None">
<path d="m1703 35c-11.32 2.97-8.07 19.81-8 33s-0.3 37.45 0 52-0.31 38.35-1 52 3.46 24.82 15.25 21.4c11.8-3.41 8.86-19.15 9.75-33.4s-0.82-37.3 0-52-0.87-38.97-1-52c-0.12-13.03-1.29-24.6-15-21m-2 151c-0.15-22.21-0.58-49.94 0-74s-2.58-51.15 2-71c13.26 0.18 9 14.97 10 28s-0.36 33.3 0 47 0.05 33.93 0 47 1.01 30.08-12 23z"/>
</g>
<g fill-opacity=".95" stroke="None">
<path d="m65 93c18.96 5.6 22.8-6.04 23-23s-1.47-34.68-23-29c0.07 16.4-0.01 35.61 0 52m6-4v-43c12.75-0.75 11.12 10.22 11 21s2.56 21.91-11 22z"/>
</g>
<g fill-opacity=".95" stroke="None">
<path d="m1547 93c18.96 5.6 22.8-6.04 23-23s-1.47-34.68-23-29c0.07 16.4-0.01 35.61 0 52m6-4v-43c12.75-0.75 11.12 10.22 11 21s2.56 21.91-11 22z"/>
</g>
<g fill-opacity=".05" stroke="None">
<path d="m568 186c13.01 7.08 11.95-9.93 12-23s0.36-33.3 0-47 1.01-33.97 0-47 3.26-27.82-10-28c-4.58 19.86-1.42 46.94-2 71s-0.15 51.79 0 74z"/>
</g>
<g fill-opacity=".05" stroke="None">
<path d="m1701 186c13.01 7.08 11.95-9.93 12-23s0.36-33.3 0-47 1-33.97 0-47 3.26-27.82-10-28c-4.58 19.85-1.42 46.94-2 71s-0.15 51.79 0 74z"/>
</g>
<g fill-opacity=".04" stroke="None">
<path d="m71 89c13.56-0.09 10.88-11.22 11-22s1.75-21.75-11-21v43z"/>
</g>
<g fill-opacity=".04" stroke="None">
<path d="m1553 89c13.56-0.09 10.88-11.22 11-22s1.75-21.75-11-21v43z"/>
</g>
</svg>
javascript html css animation loader
1个回答
0
投票

作为一个简单的解决方案,你可以做 2 个 svgs:1 个带有轮廓,2 个相互叠加填充

然后进行宽度过渡0->填充部分的最终宽度并隐藏溢出

© www.soinside.com 2019 - 2024. All rights reserved.