docs: add animated logo SVG variants

This commit is contained in:
Bernardxu123 committed 2026-08-08 16:01:33 +08:00
1 parent 7ae8c54a5a
commit 80a82b1891
5 files changed
+254

No files matched your search

+71
View File
@@ -0,0 +1,71 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151.55 217.07">
<defs>
<style>
.ghost{fill:#0153e5;fill-opacity:.18;animation:fade .6s ease-out both}
.wA path{fill:url(#sea)}.wB path{fill:#9fc6ff;opacity:.55}
.wA{animation:scrollL 2.4s linear infinite}
.wB{animation:scrollR 3.6s linear infinite}
.rise{animation:rise 1.8s cubic-bezier(.22,.9,.32,1) .15s both}
.bub{fill:#eaf6ff;opacity:0;animation:bub 4.2s linear infinite}
.b2{animation-delay:1.1s}.b3{animation-delay:2s}.b4{animation-delay:2.8s}.b5{animation-delay:3.4s}
.shine rect{fill:url(#glint);opacity:.3;animation:sweep 6s ease-in-out infinite}
.dot{fill:#0153e5;transform-box:fill-box;transform-origin:center;animation:hop 2.4s ease-in-out 2s infinite}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(210px)}to{transform:translateY(0)}}
@keyframes scrollL{to{transform:translateX(-200px)}}
@keyframes scrollR{to{transform:translateX(200px)}}
@keyframes bub{0%{transform:translateY(0);opacity:0}12%{opacity:.55}90%{opacity:.4}100%{transform:translateY(-170px);opacity:0}}
@keyframes sweep{0%,55%{transform:translateX(-260px)}85%,100%{transform:translateX(1500px)}}
@keyframes hop{0%,45%,100%{transform:translateY(0)}12%{transform:translateY(-26px)}24%{transform:translateY(0)}31%{transform:translateY(-10px)}38%{transform:translateY(0)}}
@media (prefers-color-scheme:dark){
.ghost{fill:#4d8fff;fill-opacity:.2}
.s1{stop-color:#4d8fff}.s2{stop-color:#0153e5}
.wB path{fill:#bfe0ff}
.dot{fill:#4d8fff}
.sea-g{filter:drop-shadow(0 0 10px rgba(77,143,255,.55))}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}
</style>
<linearGradient id="sea" gradientUnits="userSpaceOnUse" x1="0" y1="40" x2="0" y2="238">
<stop class="s1" offset="0" stop-color="#2f7bff"/><stop class="s2" offset="1" stop-color="#0153e5"/>
</linearGradient>
<linearGradient id="glint" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".95"/><stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<clipPath id="cut">
<path d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/>
<path d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/>
<path d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/>
<path d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/>
<path d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/>
<path d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/>
<rect x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/>
<path d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/>
</clipPath>
</defs>
<g class="ghost">
<path d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/>
<path d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/>
<path d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/>
<path d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/>
<path d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/>
<path d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/>
<rect x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/>
<path d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/>
</g>
<g clip-path="url(#cut)" class="sea-g">
<g class="rise">
<g transform="translate(0,45)">
<g class="wB"><path d="M-400 0q50 -10 100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0V300H-400Z"/></g>
<g class="wA"><path d="M-400 0q50 -14 100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0t100 0V300H-400Z"/></g>
<circle class="bub" cx="80" cy="250" r="5"/>
<circle class="bub b2" cx="260" cy="252" r="4"/>
<circle class="bub b3" cx="420" cy="248" r="6"/>
<circle class="bub b4" cx="680" cy="252" r="4"/>
<circle class="bub b5" cx="1050" cy="248" r="5"/>
</g>
</g>
<g class="shine"><rect x="0" y="-40" width="130" height="340" transform="skewX(-20)"/></g>
</g>
<circle class="dot" cx="972.16" cy="33.55" r="23.88"/>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

+70
View File
@@ -0,0 +1,70 @@
<svg viewBox="0 0 1152 240" xmlns="http://www.w3.org/2000/svg" style="max-width:900px; background:#0a0a0a;">
<defs>
<style>
.c0 { fill: #0153e5; }
.c1 { fill: #00f0ff; }
.c2 { fill: #ff00a0; }
@keyframes glitchAppear {
0% { opacity: 0; transform: translateX(-8px) skewX(-2deg); filter: blur(3px); }
8% { opacity: 1; transform: translateX(2px) skewX(1deg); filter: blur(0); }
10% { opacity: 1; transform: translateX(-1px) skewX(0); }
12% { opacity: 1; transform: translateX(0); }
88% { opacity: 1; transform: translateX(0); }
90% { opacity: 1; transform: translateX(3px); }
92% { opacity: 0.3; transform: translateX(-5px) skewX(2deg); filter: blur(2px); }
100% { opacity: 0; transform: translateX(8px); filter: blur(4px); }
}
@keyframes rgbShift {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 0; transform: translateX(0); }
10% { opacity: 0.5; transform: translateX(-3px); }
30% { opacity: 0.3; transform: translateX(2px); }
50% { opacity: 0.6; transform: translateX(-2px); }
70% { opacity: 0.4; transform: translateX(3px); }
}
@keyframes scanMove {
0% { transform: translateY(-10px); opacity: 0; }
5% { opacity: 0.6; }
95% { opacity: 0.6; }
100% { transform: translateY(250px); opacity: 0; }
}
@keyframes dotSpin {
0% { opacity: 0; transform: scale(0) rotate(0deg); }
15% { opacity: 1; transform: scale(1.2) rotate(180deg); }
25% { transform: scale(1) rotate(270deg); }
75% { transform: scale(1) rotate(360deg); opacity: 1; }
85% { opacity: 1; transform: scale(1.1) rotate(400deg); }
100% { opacity: 0; transform: scale(0) rotate(540deg); }
}
.cr { animation: glitchAppear 4s ease-in-out infinite; }
.ce { animation: glitchAppear 4s ease-in-out 0.12s infinite; }
.ca { animation: glitchAppear 4s ease-in-out 0.24s infinite; }
.cs { animation: glitchAppear 4s ease-in-out 0.36s infinite; }
.co { animation: glitchAppear 4s ease-in-out 0.48s infinite; }
.cn { animation: glitchAppear 4s ease-in-out 0.60s infinite; }
.ci { animation: glitchAppear 4s ease-in-out 0.72s infinite; }
.cx { animation: glitchAppear 4s ease-in-out 0.84s infinite; }
.cd { animation: dotSpin 4s ease-in-out 0.96s infinite; transform-origin: 972.16px 33.55px; }
.cc-r { animation: rgbShift 4s infinite 1.1s; opacity: 0; }
.cm-r { animation: rgbShift 4s infinite 1.3s; opacity: 0; }
.cc-e { animation: rgbShift 4s infinite 1.6s; opacity: 0; }
.cm-o { animation: rgbShift 4s infinite 1.9s; opacity: 0; }
.cc-x { animation: rgbShift 4s infinite 2.2s; opacity: 0; }
.scan { fill: rgba(1,83,229,0.12); animation: scanMove 3s linear 1.5s infinite; }
</style>
</defs>
<rect class="scan" x="0" y="0" width="1152" height="3" rx="1.5"/>
<g class="cc-r" transform="translate(-2.5,0)"><path class="c1" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g class="cm-r" transform="translate(2.5,0)"><path class="c2" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g class="cc-e" transform="translate(-2,0)"><path class="c1" d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/></g>
<g class="cm-o" transform="translate(2,0)"><path class="c2" d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/></g>
<g class="cc-x" transform="translate(-1.5,0)"><path class="c1" d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/></g>
<g class="cr"><path class="c0" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g class="ce"><path class="c0" d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/></g>
<g class="ca"><path class="c0" d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/></g>
<g class="cs"><path class="c0" d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/></g>
<g class="co"><path class="c0" d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/></g>
<g class="cn"><path class="c0" d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/></g>
<g class="ci"><rect class="c0" x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/></g>
<g class="cd"><circle class="c0" cx="972.16" cy="33.55" r="23.88"/></g>
<g class="cx"><path class="c0" d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 9.6 KiB

+57
View File
@@ -0,0 +1,57 @@
<svg viewBox="0 0 1152 240" xmlns="http://www.w3.org/2000/svg" style="max-width:900px;">
<defs>
<style>
.b0 { fill: none; stroke: #0153e5; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.b1 { fill: #0153e5; }
@keyframes strokeDraw {
0% { stroke-dashoffset: 1200; opacity: 0; }
20% { opacity: 1; }
60% { stroke-dashoffset: 0; opacity: 1; }
85% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@keyframes fillBreathe {
0%, 100% { opacity: 0; }
30% { opacity: 0; }
55% { opacity: 1; }
85% { opacity: 1; }
95% { opacity: 0.1; }
}
@keyframes dotBreathe {
0%, 100% { opacity: 0; transform: scale(0.5); }
40% { opacity: 0; transform: scale(0.5); }
55% { opacity: 1; transform: scale(1.15); }
65% { transform: scale(1); }
85% { opacity: 1; }
95% { opacity: 0.1; transform: scale(1); }
}
.br { stroke-dasharray: 1200; animation: strokeDraw 4s ease-in-out infinite; }
.brf { animation: fillBreathe 4s ease-in-out infinite; }
.be { stroke-dasharray: 800; animation: strokeDraw 4s ease-in-out 0.2s infinite; }
.bef { animation: fillBreathe 4s ease-in-out 0.2s infinite; }
.ba { stroke-dasharray: 900; animation: strokeDraw 4s ease-in-out 0.4s infinite; }
.baf { animation: fillBreathe 4s ease-in-out 0.4s infinite; }
.bs { stroke-dasharray: 800; animation: strokeDraw 4s ease-in-out 0.55s infinite; }
.bsf { animation: fillBreathe 4s ease-in-out 0.55s infinite; }
.bo { stroke-dasharray: 600; animation: strokeDraw 4s ease-in-out 0.7s infinite; }
.bof { animation: fillBreathe 4s ease-in-out 0.7s infinite; }
.bn { stroke-dasharray: 700; animation: strokeDraw 4s ease-in-out 0.85s infinite; }
.bnf { animation: fillBreathe 4s ease-in-out 0.85s infinite; }
.bi { stroke-dasharray: 400; animation: strokeDraw 4s ease-in-out 1.0s infinite; }
.bif { animation: fillBreathe 4s ease-in-out 1.0s infinite; }
.bd { stroke-dasharray: 200; animation: strokeDraw 4s ease-in-out 1.15s infinite; }
.bdf { animation: dotBreathe 4s ease-in-out 1.15s infinite; transform-origin: 972.16px 33.55px; }
.bx { stroke-dasharray: 700; animation: strokeDraw 4s ease-in-out 1.3s infinite; }
.bxf { animation: fillBreathe 4s ease-in-out 1.3s infinite; }
</style>
</defs>
<g><path class="b0 br" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/><path class="b1 brf" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g><path class="b0 be" d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/><path class="b1 bef" d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/></g>
<g><path class="b0 ba" d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/><path class="b1 baf" d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/></g>
<g><path class="b0 bs" d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/><path class="b1 bsf" d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/></g>
<g><path class="b0 bo" d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/><path class="b1 bof" d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/></g>
<g><path class="b0 bn" d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/><path class="b1 bnf" d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/></g>
<g><rect class="b0 bi" x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/><rect class="b1 bif" x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/></g>
<g><circle class="b0 bd" cx="972.16" cy="33.55" r="23.88"/><circle class="b1 bdf" cx="972.16" cy="33.55" r="23.88"/></g>
<g><path class="b0 bx" d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/><path class="b1 bxf" d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 9.1 KiB

+34
View File
@@ -0,0 +1,34 @@
<svg viewBox="0 0 1152 240" xmlns="http://www.w3.org/2000/svg" style="max-width:900px;">
<defs>
<style>
.w0 { fill: #0153e5; }
@keyframes waveFloat {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
75% { transform: translateY(6px); }
}
@keyframes dotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: 0.85; }
}
.wr { animation: waveFloat 2.4s ease-in-out infinite; }
.we { animation: waveFloat 2.4s ease-in-out 0.15s infinite; }
.wa { animation: waveFloat 2.4s ease-in-out 0.30s infinite; }
.ws { animation: waveFloat 2.4s ease-in-out 0.45s infinite; }
.wo { animation: waveFloat 2.4s ease-in-out 0.60s infinite; }
.wn { animation: waveFloat 2.4s ease-in-out 0.75s infinite; }
.wi { animation: waveFloat 2.4s ease-in-out 0.90s infinite; }
.wx { animation: waveFloat 2.4s ease-in-out 1.05s infinite; }
.wdot { animation: dotPulse 2.4s ease-in-out 1.20s infinite; transform-origin: 972.16px 33.55px; }
</style>
</defs>
<g class="wr"><path class="w0" d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g class="we"><path class="w0" d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/></g>
<g class="wa"><path class="w0" d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/></g>
<g class="ws"><path class="w0" d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/></g>
<g class="wo"><path class="w0" d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/></g>
<g class="wn"><path class="w0" d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/></g>
<g class="wi"><rect class="w0" x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/></g>
<g class="wdot"><circle class="w0" cx="972.16" cy="33.55" r="23.88"/></g>
<g class="wx"><path class="w0" d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151.55 217.07">
<defs>
<style>
.c{fill:#0153e5;animation:wave 2.4s ease-in-out infinite}
.d1{animation-delay:0s}.d2{animation-delay:.08s}.d3{animation-delay:.16s}.d4{animation-delay:.24s}.d5{animation-delay:.32s}.d6{animation-delay:.4s}.d7{animation-delay:.48s}.d8{animation-delay:.56s}
.dot{animation:hop 2.4s ease-in-out infinite;animation-delay:.7s;transform-box:fill-box;transform-origin:50% 50%}
@keyframes wave{0%,32%,100%{transform:translateY(0)}10%{transform:translateY(-12px)}20%{transform:translateY(3px)}}
@keyframes hop{0%,45%,100%{transform:translateY(0)}12%{transform:translateY(-26px)}24%{transform:translateY(0)}31%{transform:translateY(-10px)}38%{transform:translateY(0)}}
@media (prefers-color-scheme:dark){.c,.dot{fill:#0153e5}}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}
</style>
</defs>
<g class="c d1"><path d="M134.57,139.75l.02-.02c12.9-3.8,24.24-10.63,33.31-20.48v-.03c9.89-11.07,16.1-24.46,18.25-39.19,4.93-32.21-11.06-61.62-41.17-74.07C134.39,1.71,123.51-.11,111.97,0L0,.03v214.57l55.04-.04v-72.42c6,1.93,12.33,2.97,18.82,2.94l18.02,24.87,32.75,44.72,65.37-.09-55.43-74.84h0ZM132.36,129.86c-7.5,2.48-15.55,2.11-23.21-.12-13.17-9.95-20.3-20.57-31.51-30.7-14.37-12.97-33.39-21.96-52.86-21.08,1.55-4.25,3.78-8.31,6.68-12.03,10.05-12.55,23.77-16.55,39.52-14.34,5.82.82,12.03-6.02,23.86-4.7.79.09,1.6.68,1.67,1.16.27,1.61-4.3,2.49-4.3,6.9,0,1.86.83,4.01,2.59,5.24,6.03,4.23,11.26,8.99,16.72,13.9,2.66,2.39,11.66,9.1,13.95,3.64,1.34-3.19,2.22-6.53,3.11-9.93.44-1.68-.49-2.68-1.85-3.48-9.29-5.51-12.79-16.96-9.16-27.12.35-.98,1.26-1.46,2.03-1.49,3.12-.13,1.46,5.65,9.18,8.03,7.32,2.26,7.54,8.34,11.1,5.92,8.29-5.65,11.28-1.02,18.98-8.27.79-.74,2.15-.8,2.97-.22.51.35.95,1.26.91,2.33-.22,6.12-2.61,11.97-6.8,16.46-7.91,8.49-14.56,4.43-14.99,10.38-1.26,17.46-6.97,34.9-19.37,47.58-.4.41-.63.99-.57,1.38.07.41.56.82,1.1.99l10.44,3.55c1.47.5,2.55,1.83,2.35,3.24-.17,1.23-1.15,2.32-2.55,2.79h.01Z"/></g>
<g class="c d2"><path d="M294.69,165.71c11.08,4.99,20.6,11.87,31.28,18.31-14.54,22.26-39.3,32.78-65.14,31.91-42.29-1.42-73.12-35.5-70.7-77.31,2.1-36.29,28.66-64.56,65.17-67.92,26.31-2.42,52.01,8.19,66.02,30.99,9.52,15.5,11.55,33.39,9.76,50.92l-101,.13c1.4,14.77,13.51,25.01,25.92,27.74,14.72,3.24,29.02-.82,38.69-14.77h0ZM294.02,127.16c-4.12-16.52-17.68-24.4-32.5-24.13-13.74.25-27.5,9.07-30.5,24.11l63,.02h0Z"/></g>
<g class="c d3"><path d="M488.72,211.37c-12.37,1.71-24.96.46-38.13.63l-1.23-16.27c-12.87,14.9-29.84,21.97-49.07,19.87-24.58-2.69-44.41-19.38-53.2-42.6-7.32-19.32-6.99-40.86.81-60.12,9.5-23.46,30.72-40.21,55.73-42.02,18.41-1.33,34.33,4.84,45.96,18.54l1.13-15.37,37.63-.22.36,137.56h.01ZM451.41,143.22c0-19.82-16.06-35.88-35.88-35.88s-35.88,16.06-35.88,35.88,16.06,35.88,35.88,35.88,35.88-16.06,35.88-35.88Z"/></g>
<g class="c d4"><path d="M595.11,210.55c-30.01,11.52-78.69,6.96-94.37-27.63l29.88-14.4c4.49,1.96,5.5,6.8,9.44,9.49,16.43,11.17,43.99,9.75,44.36-4.61.12-4.72-3.46-8.89-8.58-10.29l-36.51-9.95c-11.77-3.21-22.59-9.81-28.13-21.2-10.25-21.06.12-45.53,21.63-54.96,29.01-12.72,77.53-8.27,89.7,25.13l-29.06,12.62c-10.47-12.8-27.66-16.84-42.64-10.42-3.51,1.5-5.54,6.03-5.28,8.81.35,3.7,3.39,7.71,7.59,8.86l40.46,11.09c9.77,2.68,19.02,7.82,24.29,16.77,13.52,22.96,2.31,51.05-22.78,60.69h0Z"/></g>
<g class="c d5"><path d="M780.3,143.31c0,40.74-33.02,73.76-73.76,73.76s-73.76-33.02-73.76-73.76,33.02-73.76,73.76-73.76,73.76,33.02,73.76,73.76ZM742.63,143.26c0-19.97-16.19-36.16-36.16-36.16s-36.16,16.19-36.16,36.16,16.19,36.16,36.16,36.16,36.16-16.19,36.16-36.16Z"/></g>
<g class="c d6"><path d="M865.82,106.67c-16.4-.48-30.2,10.42-30.32,26.41l-.59,78.88-38.91-.18.06-137.83,38.15.35c.41,5.66-1.03,9.97,1.45,15.75,19.54-26.51,63.34-25.07,82.95-1.16,9.2,11.23,13.46,25.62,13.45,40.38l-.06,82.62-38.94.14-.69-79.28c-.13-14.92-10.82-25.64-26.54-26.1v.02h-.01Z"/></g>
<g class="c d7"><rect x="902.92" y="123.54" width="138.32" height="38.82" transform="translate(828.4526 1114.9362) rotate(-89.96)"/></g>
<g class="c d8"><path d="M1151.55,211.51l-44.84.51-29.9-41.82-30.52,41.81-43.29-.52,50.71-70.03-48.12-67.06c16.29-1.81,30.31-.14,45.42-.02l26.06,38.81,27.14-39.29c14.85-.38,28.79-.61,44.5.69l-47.96,66.65,50.79,70.28h0Z"/></g>
<circle class="dot" cx="972.16" cy="33.55" r="23.88" fill="#0153e5"/>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB