mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-15 04:33:54 +02:00
3afe0b007c
Adds new mode of audio indicator, audio wave, which show some placeholder animation indicating audio playing. Also show muted tab by flat wave
333 lines
No EOL
16 KiB
XML
333 lines
No EOL
16 KiB
XML
<?xml version='1.0' encoding='utf-8'?>
|
|
<svg width='1000' height='120' viewBox='0 0 1000 120' preserveAspectRatio="none" fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
<rect width='1000' height='120' />
|
|
<g class="g" transform="translate(20 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.95;1 0.8;1 0.52;1 0.78;1 0.95;1 1.04;1 1.04;1 1.17;1 0.94;1 0.8;1 0.73;1 0.7;1 0.9;1 0.95"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(45 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.1;1 1.05;1 1.2;1 0.82;1 1.13;1 1.3;1 1.31;1 1.14;1 1.07;1 1.1;1 1.1" dur="7.5s"
|
|
repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(70 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.12;1 1.33;1 1.22;1 1.07;1 1.07;1 1.00;1 1.37;1 1.32;1 1.37;1 1.27;1 1.19;1 1.28;1 1.18;1 1.16;1 1.04;1 1.13;1 1.31;1 1.06;1 1.12"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(95 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.38;1 1.23;1 1.11;1 1.40;1 1.21;1 1.45;1 1.36;1 1.30;1 1.35;1 1.24;1 1.38;1 1.16;1 1.41;1 1.43;1 1.14;1 1.15;1 1.20;1 1.42;1 1.38"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(120 130) rotate(180)">
|
|
<rect class="test fill1" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.86;1 1.09;1 1.07;1 0.86;1 1.00;1 0.89;1 0.95;1 0.91;1 1.18;1 1.06;1 1.14;1 1.08;1 0.82;1 1.10;1 0.96;1 0.87;1 1.04;1 1.15;1 0.86"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(145 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.04;1 0.83;1 1.18;1 1.19;1 1.09;1 1.12;1 1.10;1 1.01;1 0.83;1 0.83;1 1.15;1 0.82;1 1.05;1 0.90;1 1.10;1 1.20;1 0.92;1 0.96;1 1.04"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(170 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.88;1 1.07;1 0.91;1 1.12;1 1.07;1 1.15;1 1.13;1 1.14;1 0.99;1 1.14;1 0.99;1 1.15;1 0.89;1 0.97;1 1.18;1 1.10;1 0.81;1 1.10;1 0.88"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(195 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.92;1 1.09;1 1.07;1 1.07;1 0.84;1 1.16;1 1.04;1 1.06;1 0.99;1 1.19;1 1.04;1 0.93;1 0.96;1 0.84;1 1.01;1 1.08;1 1.11;1 0.83;1 0.92"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(220 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.92;1 1.11;1 0.98;1 1.10;1 1.03;1 0.92;1 1.18;1 0.85;1 1.06;1 0.89;1 1.06;1 0.98;1 0.86;1 1.17;1 0.87;1 1.11;1 0.97;1 1.14;1 0.92"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(245 130) rotate(180)">
|
|
<rect class="test fill2" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.80;1 1.01;1 1.01;1 0.95;1 0.96;1 0.73;1 0.95;1 0.88;1 0.81;1 0.79;1 0.99;1 1.04;1 0.84;1 0.94;1 0.92;1 1.03;1 0.90;1 1.07;1 0.8"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(270 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.87;1 0.81;1 0.92;1 0.78;1 1.08;1 0.79;1 1.00;1 0.93;1 0.98;1 1.04;1 0.88;1 1.05;1 1.09;1 1.03;1 1.00;1 0.99;1 1.08;1 1.09;1 0.87"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(295 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.93;1 0.80;1 0.73;1 0.90;1 0.99;1 0.77;1 0.79;1 0.62;1 0.69;1 0.78;1 0.70;1 0.68;1 0.70;1 0.83;1 0.82;1 0.78;1 0.88;1 0.66;1 0.93"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(320 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.78;1 0.82;1 0.65;1 0.65;1 0.87;1 0.88;1 0.64;1 0.97;1 0.94;1 0.91;1 0.77;1 0.99;1 0.71;1 0.88;1 0.87;1 0.77;1 0.91;1 0.82;1 0.78"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(345 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.93;1 0.99;1 0.62;1 0.75;1 0.62;1 0.70;1 0.99;1 0.91;1 0.99;1 0.74;1 1.00;1 0.81;1 0.82;1 0.62;1 0.97;1 0.95;1 0.93;1 0.80;1 0.93"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(370 130) rotate(180)">
|
|
<rect class="test fill3" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.83;1 0.68;1 0.66;1 0.80;1 0.84;1 0.83;1 0.74;1 0.85;1 0.71;1 0.75;1 0.84;1 0.69;1 0.99;1 0.97;1 0.93;1 0.68;1 0.80;1 0.81;1 0.83"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(395 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.72;1 0.69;1 0.74;1 0.80;1 0.72;1 0.66;1 0.99;1 0.66;1 0.86;1 0.69;1 0.70;1 0.95;1 0.71;1 0.64;1 0.65;1 0.87;1 0.70;1 0.93;1 0.72"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(420 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.57;1 0.84;1 0.67;1 0.83;1 0.60;1 0.70;1 0.81;1 0.65;1 0.65;1 0.90;1 0.71;1 0.70;1 0.54;1 0.57;1 0.73;1 0.67;1 0.73;1 0.66;1 0.57"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(445 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.98;1 0.86;1 0.94;1 1.18;1 1.06;1 0.95;1 1.10;1 1.00;1 0.85;1 1.15;1 0.97;1 0.81;1 0.84;1 1.13;1 0.94;1 1.01;1 1.12;1 0.93;1 0.98"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(470 130) rotate(180)">
|
|
<rect class="test fill" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.92;1 1.20;1 1.02;1 1.08;1 0.93;1 0.92;1 1.25;1 1.27;1 1.17;1 1.19;1 0.94;1 1.24;1 0.92;1 1.15;1 1.26;1 1.20;1 0.98;1 1.23;1 0.92"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(495 130) rotate(180)">
|
|
<rect class="test fill4" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.33;1 1.23;1 1.11;1 1.31;1 1.48;1 1.31;1 1.12;1 1.40;1 1.30;1 1.30;1 1.18;1 1.20;1 1.41;1 1.45;1 1.35;1 1.12;1 1.17;1 1.20;1 1.33"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(520 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.17;1 0.96;1 1.19;1 0.82;1 1.08;1 1.05;1 0.93;1 0.95;1 1.15;1 0.95;1 0.85;1 0.85;1 1.16;1 1.15;1 0.94;1 1.04;1 1.02;1 0.99;1 1.17"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(545 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 1.12;1 0.89;1 1.14;1 0.95;1 1.08;1 1.07;1 1.00;1 1.04;1 0.81;1 1.12;1 0.92;1 0.89;1 0.98;1 0.81;1 0.97;1 0.96;1 1.02;1 0.87;1 1.12"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(570 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.99;1 0.82;1 1.01;1 1.11;1 0.96;1 1.06;1 1.07;1 0.84;1 0.91;1 0.85;1 1.01;1 0.99;1 1.03;1 0.81;1 1.19;1 0.94;1 0.83;1 1.01;1 0.99"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(595 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.98;1 0.84;1 0.81;1 0.82;1 1.04;1 0.74;1 0.81;1 0.79;1 1.04;1 0.85;1 0.73;1 1.05;1 0.91;1 0.80;1 0.77;1 0.98;1 0.82;1 0.98;1 0.98"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(620 130) rotate(180)">
|
|
<rect class="test fill5" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.77;1 0.83;1 1.03;1 0.76;1 0.71;1 0.95;1 0.80;1 1.00;1 0.81;1 0.75;1 0.96;1 0.96;1 0.84;1 1.02;1 1.09;1 0.71;1 1.06;1 0.85;1 0.77"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(645 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.78;1 0.91;1 0.75;1 0.79;1 0.80;1 0.66;1 0.81;1 0.72;1 0.83;1 0.63;1 0.63;1 0.71;1 0.86;1 0.86;1 0.79;1 0.86;1 0.67;1 0.93;1 0.78"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(670 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.90;1 0.84;1 0.54;1 0.82;1 0.76;1 0.76;1 0.80;1 0.69;1 0.57;1 0.57;1 0.61;1 0.76;1 0.84;1 0.72;1 0.85;1 0.82;1 0.70;1 0.74;1 0.9"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(695 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.8;1 0.74;1 0.85;1 0.86;1 0.73;1 0.64;1 0.81;1 0.57;1 0.50;1 0.85;1 0.88;1 0.88;1 0.69;1 0.89;1 0.67;1 0.60;1 0.75;1 0.84;1 0.8"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(720 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.51;1 0.87;1 0.68;1 0.81;1 0.81;1 0.58;1 0.54;1 0.75;1 0.81;1 0.56;1 0.76;1 0.78;1 0.71;1 0.72;1 0.54;1 0.88;1 0.68;1 0.87;1 0.51"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(745 130) rotate(180)">
|
|
<rect class="test fill6" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.31;1 0.50;1 0.47;1 0.67;1 0.42;1 0.40;1 0.47;1 0.53;1 0.36;1 0.66;1 0.50;1 0.54;1 0.49;1 0.47;1 0.30;1 0.40;1 0.49;1 0.50;1 0.31"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(770 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.5;1 0.43;1 0.39;1 0.54;1 0.65;1 0.56;1 0.32;1 0.48;1 0.36;1 0.45;1 0.32;1 0.59;1 0.59;1 0.38;1 0.59;1 0.31;1 0.51;1 0.40;1 0.5"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(795 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.55;1 0.69;1 0.46;1 0.62;1 0.54;1 0.57;1 0.48;1 0.44;1 0.57;1 0.45;1 0.44;1 0.33;1 0.56;1 0.31;1 0.54;1 0.39;1 0.55;1 0.61;1 0.55"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(820 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.38;1 0.67;1 0.66;1 0.41;1 0.52;1 0.55;1 0.43;1 0.49;1 0.55;1 0.59;1 0.41;1 0.64;1 0.58;1 0.59;1 0.62;1 0.35;1 0.67;1 0.38;1 0.38"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(845 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.49;1 0.57;1 0.70;1 0.56;1 0.52;1 0.43;1 0.55;1 0.71;1 0.55;1 0.77;1 0.58;1 0.51;1 0.43;1 0.61;1 0.40;1 0.64;1 0.53;1 0.50;1 0.49"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(870 130) rotate(180)">
|
|
<rect class="test fill7" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.62;1 0.58;1 0.40;1 0.64;1 0.44;1 0.45;1 0.66;1 0.76;1 0.76;1 0.69;1 0.74;1 0.47;1 0.54;1 0.55;1 0.66;1 0.60;1 0.58;1 0.55;1 0.62"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(895 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.75;1 0.44;1 0.74;1 0.78;1 0.71;1 0.48;1 0.75;1 0.47;1 0.78;1 0.73;1 0.70;1 0.79;1 0.65;1 0.55;1 0.41;1 0.48;1 0.41;1 0.68;1 0.75"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(920 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.58;1 0.79;1 0.61;1 0.60;1 0.63;1 0.42;1 0.71;1 0.51;1 0.44;1 0.63;1 0.76;1 0.76;1 0.58;1 0.74;1 0.42;1 0.45;1 0.51;1 0.46;1 0.58"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(945 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.64;1 0.82;1 0.75;1 0.83;1 0.89;1 0.61;1 0.60;1 0.84;1 0.62;1 0.54;1 0.72;1 0.52;1 0.60;1 0.65;1 0.52;1 0.87;1 0.75;1 0.66;1 0.64"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(970 130) rotate(180)">
|
|
<rect class="test" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.71;1 0.57;1 0.80;1 0.76;1 0.71;1 0.62;1 0.51;1 0.52;1 0.67;1 0.62;1 0.73;1 0.69;1 0.67;1 0.81;1 0.55;1 0.70;1 0.55;1 0.88;1 0.71"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<g class="g" transform="translate(995 130) rotate(180)">
|
|
<rect class="test fill8" width="20" height="60" rx="5">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
values="1 0.57;1 0.71;1 0.67;1 0.77;1 0.76;1 0.69;1 0.88;1 0.55;1 0.83;1 0.63;1 0.59;1 0.73;1 0.63;1 0.53;1 0.81;1 0.82;1 0.53;1 0.67;1 0.57"
|
|
dur="7.5s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
<style>
|
|
.test {
|
|
fill: context-fill;
|
|
/* animation: fillAnimation 5s infinite; */
|
|
|
|
}
|
|
|
|
@keyframes fillAnimation {
|
|
0% {
|
|
fill: yellow;
|
|
}
|
|
|
|
100% {
|
|
fill: red;
|
|
}
|
|
}
|
|
|
|
/* .fill1 {
|
|
fill: yellow;
|
|
}
|
|
|
|
.fill2 {
|
|
fill: aqua;
|
|
}
|
|
|
|
.fill3 {
|
|
fill: chartreuse;
|
|
}
|
|
|
|
.fill4 {
|
|
fill: coral;
|
|
}
|
|
|
|
.fill5 {
|
|
fill: darkviolet;
|
|
}
|
|
|
|
.fill6 {
|
|
fill: red;
|
|
}
|
|
|
|
.fill7 {
|
|
fill: seagreen;
|
|
}
|
|
|
|
.fill8 {
|
|
fill: lightpink;
|
|
} */
|
|
</style>
|
|
</svg> |