44 lines
1.3 KiB
XML
44 lines
1.3 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
|
||
|
|
<defs>
|
||
|
|
<style>
|
||
|
|
.wave-group > use {
|
||
|
|
animation: move-forever 12s linear infinite;
|
||
|
|
}
|
||
|
|
.wave-group > use:nth-child(1) {
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
.wave-group > use:nth-child(2) {
|
||
|
|
animation-delay: -2s;
|
||
|
|
animation-duration: 5s;
|
||
|
|
}
|
||
|
|
.wave-group > use:nth-child(3) {
|
||
|
|
animation-delay: -4s;
|
||
|
|
animation-duration: 3s;
|
||
|
|
}
|
||
|
|
@keyframes move-forever {
|
||
|
|
0% {
|
||
|
|
transform: translate(-90px, 0%);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translate(85px, 0%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</defs>
|
||
|
|
<defs>
|
||
|
|
<path
|
||
|
|
id="wave-animation"
|
||
|
|
d="M-160 44c30 0
|
||
|
|
58-18 88-18s
|
||
|
|
58 18 88 18
|
||
|
|
58-18 88-18
|
||
|
|
58 18 88 18
|
||
|
|
v44h-352z"
|
||
|
|
/>
|
||
|
|
</defs>
|
||
|
|
<g class="wave-group">
|
||
|
|
<use xlink:href="#wave-animation" x="50" y="0" fill="#2d8cf0" />
|
||
|
|
<use xlink:href="#wave-animation" x="50" y="3" fill="#5997ff" />
|
||
|
|
<use xlink:href="#wave-animation" x="50" y="6" fill="#81baff" />
|
||
|
|
</g>
|
||
|
|
</svg>
|