зеркало из https://github.com/mozilla/fxa.git
Merge pull request #17594 from mozilla/FXA-10419
fix(settings): Fix recovery key animations and styling
This commit is contained in:
Valerie Pomerleau
GitHub
Коммит
67db76983c
|
|
@ -19,7 +19,7 @@ import {
|
|||
KeySvg,
|
||||
LockSvg,
|
||||
PrinterSvg,
|
||||
SecurityShieldSvg,
|
||||
RecoveryKeySvg,
|
||||
MozillaLogoSvg,
|
||||
} from './VectorImagesForPdf';
|
||||
import notoSansMonoSemiBold from './fonts/NotoSansMono-SemiBold.ttf';
|
||||
|
|
@ -146,7 +146,7 @@ export const RecoveryKeyPDF = ({
|
|||
<MozillaLogoSvg />
|
||||
</View>
|
||||
<View style={styles.purpleSection}>
|
||||
<SecurityShieldSvg />
|
||||
<RecoveryKeySvg />
|
||||
<Text style={styles.heading}>{localizedText.heading}</Text>
|
||||
{/* TODO in FXA-8313: Verify formatting of RTL dates - bidirectionality markers are not respected
|
||||
and numeric values are incorrectly reversed (e.g., 3202 instead of 2023) */}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import { Svg, Path, Rect, Circle } from '@react-pdf/renderer';
|
|||
To include SVG in PDFs with react-pdf/renderer, SVGs must to be added directly in the format explained in docs.
|
||||
This requires modifying the source code of SVGs to match the expected format.
|
||||
|
||||
Note that support for advanced SVG features is limited (gradients and shadows are notably difficult to port over).
|
||||
Note that support for advanced SVG features (e.g., gradients and shadows) is limited/null,
|
||||
and it's generally preferable to use simplifed versions of graphics without these complexities.
|
||||
|
||||
If we need to we can explore turning the SVG into base64 PNG programmatically,
|
||||
with a last resort to just use a PNG version of the image (discouraged).
|
||||
|
|
@ -17,7 +18,7 @@ import { Svg, Path, Rect, Circle } from '@react-pdf/renderer';
|
|||
See docs: https://react-pdf.org/svg
|
||||
*/
|
||||
|
||||
export const SecurityShieldSvg = () => {
|
||||
export const RecoveryKeySvg = () => {
|
||||
return (
|
||||
<Svg
|
||||
style={{
|
||||
|
|
@ -30,28 +31,28 @@ export const SecurityShieldSvg = () => {
|
|||
>
|
||||
<Path
|
||||
d="M139.331 60.5897C139.165 60.5897 139 60.5984 138.835 60.6023C138.835 60.5981 138.835 60.5939 138.835 60.5897C138.835 45.9046 126.951 34 112.292 34C100.388 34 90.3143 41.8505 86.9482 52.6652C84.4071 51.3246 81.5148 50.5621 78.4433 50.5621C68.3467 50.5621 60.1618 58.7614 60.1618 68.8758C60.1618 70.5235 60.3825 72.1189 60.7898 73.6378C58.9559 72.8217 56.9307 72.3589 54.7945 72.3589C46.6237 72.3589 40 78.9944 40 87.1795C40 95.3646 46.6237 102 54.7945 102H139.331C150.746 102 160 92.73 160 81.2948C160 69.8596 150.746 60.5897 139.331 60.5897Z"
|
||||
style={{ fill: 'white', stroke: '#D1E7F5', strokeWidth: 0.5 }}
|
||||
style={{ fill: 'white', stroke: '#DABDFF', strokeWidth: 2 }}
|
||||
/>
|
||||
|
||||
<Circle cx="95.1354" cy="102.607" r="16.1909" style={{ fill: 'white' }} />
|
||||
<Path
|
||||
d="M156.752 98.0741H118.33C115.995 88.3016 107.318 81 96.9746 81C84.8406 81 75 91.0385 75 103.343C75 115.647 84.8406 125.685 96.9746 125.685C108.058 125.685 117.114 117.286 118.623 106.477H144.216V117.215C144.216 119.518 146.057 121.417 148.362 121.417C150.668 121.417 152.509 119.518 152.509 117.215V106.477H156.752C159.058 106.477 160.898 104.578 160.898 102.275C160.898 99.9725 159.058 98.0741 156.752 98.0741ZM96.9746 117.282C89.447 117.282 83.2924 111.045 83.2924 103.343C83.2924 95.6402 89.447 89.4028 96.9746 89.4028C104.502 89.4028 110.657 95.6402 110.657 103.343C110.657 111.045 104.502 117.282 96.9746 117.282Z"
|
||||
style={{ fill: '#0190ED', stroke: '#0190ED', strokeWidth: 2 }}
|
||||
style={{ fill: '#0090ED', stroke: '#0090ED', strokeWidth: 2 }}
|
||||
/>
|
||||
|
||||
{/* Circle under the checkmark */}
|
||||
<Circle
|
||||
cx="57.5"
|
||||
cx="63"
|
||||
cy="114.5"
|
||||
r="25.5"
|
||||
style={{ fill: '#FAFFFA', stroke: '#D4E8D5', strokeWidth: 1 }}
|
||||
r="20"
|
||||
style={{ fill: '#FFFFFF', stroke: '#DABDFF', strokeWidth: 2 }}
|
||||
/>
|
||||
|
||||
{/* Checkmark */}
|
||||
<Path
|
||||
d="M47 115L54 122L68 108"
|
||||
d="M52 115L59 122L73 108"
|
||||
style={{
|
||||
stroke: '#1CC5A0',
|
||||
stroke: '#1DC5A0',
|
||||
strokeWidth: 5,
|
||||
fill: 'none',
|
||||
strokeLineCap: 'round',
|
||||
|
|
@ -60,20 +61,20 @@ export const SecurityShieldSvg = () => {
|
|||
|
||||
{/* Star 1 (4 flat color quadrants) */}
|
||||
<Path
|
||||
d="M160.47 76.7347C160.473 76.5934 160.426 76.4555 160.338 76.3456C160.249 76.2356 160.124 76.1606 159.985 76.1341C158.801 75.9198 155.531 75.1471 154.414 74.0477C153.297 72.9483 152.542 69.6783 152.335 68.477C152.31 68.3382 152.236 68.2129 152.126 68.124C152.017 68.0351 151.879 67.9884 151.738 67.9923V76.7347H160.47Z"
|
||||
d="M152.47 76.7347C152.473 76.5934 152.426 76.4555 152.338 76.3456C152.249 76.2356 152.124 76.1606 151.985 76.1341C150.801 75.9198 147.531 75.1471 146.414 74.0477C145.297 72.9483 144.542 69.6783 144.335 68.477C144.31 68.3382 144.236 68.2129 144.126 68.124C144.017 68.0351 143.879 67.9884 143.738 67.9923V76.7347H152.47Z"
|
||||
style={{ fill: '#DABDFF' }}
|
||||
/>
|
||||
<Path
|
||||
d="M151.774 67.9921C151.632 67.9926 151.495 68.0434 151.387 68.1353C151.279 68.2272 151.207 68.3544 151.184 68.4943C150.984 69.671 150.25 72.8884 149.143 74.0791C148.037 75.2698 144.749 75.9617 143.488 76.1865C143.349 76.2137 143.225 76.2886 143.135 76.3984C143.046 76.5081 142.998 76.6457 143 76.7872H151.781L151.774 67.9921Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
d="M143.774 67.9921C143.632 67.9926 143.495 68.0434 143.387 68.1353C143.279 68.2272 143.207 68.3544 143.184 68.4943C142.984 69.671 142.25 72.8884 141.143 74.0791C140.037 75.2698 136.749 75.9617 135.488 76.1865C135.349 76.2137 135.225 76.2886 135.135 76.3984C135.046 76.5081 134.998 76.6457 135 76.7872H143.781L143.774 67.9921Z"
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M151.727 76.735V85.4775C151.868 85.4732 152.004 85.4213 152.113 85.3302C152.221 85.239 152.295 85.1139 152.324 84.9752C152.538 83.7774 153.311 80.4582 154.41 79.3553C155.51 78.2524 158.783 77.5253 159.967 77.3251C160.105 77.3027 160.232 77.2318 160.323 77.125C160.414 77.0183 160.465 76.8826 160.466 76.7421L151.727 76.735Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
d="M143.727 76.735V85.4775C143.868 85.4732 144.004 85.4213 144.113 85.3302C144.221 85.239 144.295 85.1139 144.324 84.9752C144.538 83.7774 145.311 80.4582 146.41 79.3553C147.51 78.2524 150.783 77.5253 151.967 77.3251C152.105 77.3027 152.232 77.2318 152.323 77.125C152.414 77.0183 152.465 76.8826 152.466 76.7421L143.727 76.735Z"
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M143 76.735C142.995 76.8781 143.044 77.0179 143.137 77.1266C143.23 77.2353 143.361 77.3049 143.503 77.3216C144.697 77.5253 148.027 78.2559 149.144 79.3623C150.261 80.4687 150.984 83.7529 151.184 85.0033C151.205 85.1458 151.275 85.2763 151.384 85.371C151.492 85.4658 151.631 85.5185 151.774 85.5196V76.7386L143 76.735Z"
|
||||
style={{ fill: '#007BED' }}
|
||||
d="M135 76.735C134.995 76.8781 135.044 77.0179 135.137 77.1266C135.23 77.2353 135.361 77.3049 135.503 77.3216C136.697 77.5253 140.027 78.2559 141.144 79.3623C142.261 80.4687 142.984 83.7529 143.184 85.0033C143.205 85.1458 143.275 85.2763 143.384 85.371C143.492 85.4658 143.631 85.5185 143.774 85.5196V76.7386L135 76.735Z"
|
||||
style={{ fill: '#027BED' }}
|
||||
/>
|
||||
|
||||
{/* Star 2 (4 flat color quadrants) */}
|
||||
|
|
@ -83,15 +84,15 @@ export const SecurityShieldSvg = () => {
|
|||
/>
|
||||
<Path
|
||||
d="M174.3 48.6727C174.056 48.6725 173.819 48.7596 173.634 48.9182C173.448 49.0768 173.325 49.2965 173.287 49.5377C172.938 51.5703 171.674 57.1211 169.761 59.177C167.849 61.2328 162.194 62.4236 160.006 62.7921C159.765 62.8379 159.548 62.9673 159.393 63.1575C159.238 63.3477 159.156 63.5865 159.16 63.8317H174.288L174.3 48.6727Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M174.217 63.7581V78.8433C174.461 78.836 174.695 78.7466 174.881 78.5896C175.068 78.4326 175.196 78.2172 175.245 77.9783C175.613 75.9108 176.948 70.1855 178.844 68.2809C180.741 66.3764 186.389 65.1235 188.437 64.7899C188.676 64.7489 188.892 64.6255 189.049 64.4412C189.205 64.2568 189.292 64.0233 189.294 63.7813L174.217 63.7581Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M159.16 63.7581C159.154 64.005 159.239 64.2457 159.399 64.4335C159.56 64.6212 159.784 64.7427 160.029 64.7743C162.085 65.1235 167.834 66.3802 169.762 68.2926C171.689 70.2049 172.939 75.8682 173.288 78.0287C173.321 78.2739 173.442 78.4986 173.628 78.6618C173.814 78.825 174.053 78.9156 174.3 78.917V63.7581H159.16Z"
|
||||
style={{ fill: '#007BED' }}
|
||||
style={{ fill: '#027BED' }}
|
||||
/>
|
||||
|
||||
{/* Star 3 (4 flat color quadrants) */}
|
||||
|
|
@ -101,15 +102,15 @@ export const SecurityShieldSvg = () => {
|
|||
/>
|
||||
<Path
|
||||
d="M156.16 42.0042C156.067 42.0045 155.976 42.0378 155.905 42.0982C155.834 42.1586 155.786 42.2422 155.77 42.3343C155.64 43.1106 155.156 45.2286 154.429 46.0118C153.701 46.7951 151.534 47.2517 150.702 47.3957C150.61 47.413 150.528 47.4619 150.469 47.5338C150.41 47.6057 150.378 47.6961 150.379 47.7891H156.16V42.0042Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M156.132 47.7563V53.5167C156.225 53.5131 156.313 53.4786 156.384 53.4188C156.455 53.3589 156.503 53.2772 156.522 53.1865C156.666 52.3962 157.172 50.2115 157.899 49.4774C158.626 48.7433 160.779 48.2726 161.559 48.1427C161.65 48.1276 161.734 48.0805 161.793 48.0097C161.853 47.9388 161.886 47.849 161.886 47.7563H156.132Z"
|
||||
style={{ fill: '#00B3F4' }}
|
||||
style={{ fill: '#01B3F4' }}
|
||||
/>
|
||||
<Path
|
||||
d="M150.379 47.7563C150.376 47.8511 150.409 47.9434 150.471 48.0154C150.532 48.0874 150.618 48.134 150.712 48.1462C151.496 48.2761 153.691 48.7573 154.429 49.4879C155.166 50.2185 155.64 52.3821 155.77 53.204C155.781 53.3 155.827 53.3886 155.899 53.4533C155.971 53.518 156.064 53.5542 156.16 53.5553V47.7563H150.379Z"
|
||||
style={{ fill: '#007BED' }}
|
||||
style={{ fill: '#027BED' }}
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 8.9 KiB После Ширина: | Высота: | Размер: 8.9 KiB |
|
|
@ -1,115 +1,84 @@
|
|||
<svg width="240" height="155" viewBox="0 0 240 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.asterisk-1 {
|
||||
animation: asterisk1Animation 5s infinite ease-in-out;
|
||||
.animate-type-first-repeat {
|
||||
animation: asterisk1Animation 5s infinite ease-in-out;
|
||||
}
|
||||
.animate-type-second-repeat {
|
||||
animation: asterisk2Animation 5s infinite ease-in-out;
|
||||
}
|
||||
.animate-type-third-repeat {
|
||||
animation: asterisk3Animation 5s infinite ease-in-out;
|
||||
}
|
||||
.animate-type-fourth-repeat {
|
||||
animation: asterisk4Animation 5s infinite ease-in-out;
|
||||
}
|
||||
@keyframes asterisk1Animation {
|
||||
0%, 10%, 100% { opacity: 0 }
|
||||
20%, 80% { opacity: 1 }
|
||||
}
|
||||
@keyframes asterisk2Animation {
|
||||
0%, 20%, 100% { opacity: 0; }
|
||||
30%, 80% { opacity: 1; }
|
||||
}
|
||||
@keyframes asterisk3Animation {
|
||||
0%, 30%, 100% { opacity: 0; }
|
||||
40%, 80% { opacity: 1; }
|
||||
}
|
||||
@keyframes asterisk4Animation {
|
||||
0%, 40%, 100% { opacity: 0; }
|
||||
50%, 80% { opacity: 1 }
|
||||
}
|
||||
.animate-wait-and-rotate {
|
||||
animation: rotateLock 5s infinite ease-out;
|
||||
}
|
||||
.animate-pulse-first {
|
||||
animation: twinkle 2.5s infinite ease-in-out alternate;
|
||||
}
|
||||
.animate-pulse-second {
|
||||
animation: twinkle 3s infinite ease-in-out alternate;
|
||||
}
|
||||
.animate-pulse-third {
|
||||
animation: twinkle 3.5s infinite ease-in-out alternate;
|
||||
}
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.asterisk-2 {
|
||||
animation: asterisk2Animation 5s infinite ease-in-out;
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.asterisk-3 {
|
||||
animation: asterisk3Animation 5s infinite ease-in-out;
|
||||
}
|
||||
@keyframes rotateLock {
|
||||
0%, 70% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.asterisk-4 {
|
||||
animation: asterisk4Animation 5s infinite ease-in-out;
|
||||
80%, 100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
@keyframes asterisk1Animation {
|
||||
0% { fill: #0090ED; }
|
||||
10% { fill: #0090ED; }
|
||||
20% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk2Animation {
|
||||
0% { fill: #0090ED; }
|
||||
20% { fill: #0090ED; }
|
||||
30% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk3Animation {
|
||||
0% { fill: #0090ED; }
|
||||
30% { fill: #0090ED; }
|
||||
40% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
@keyframes asterisk4Animation {
|
||||
0% { fill: #0090ED; }
|
||||
40% { fill: #0090ED; }
|
||||
50% { fill: white; }
|
||||
80% { fill: white; }
|
||||
100% { fill: #0090ED; }
|
||||
}
|
||||
|
||||
.lock {
|
||||
transform-origin: 62px 102px;
|
||||
animation: rotateLock 5s infinite ease-out;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
transform-origin: 115px 62px;
|
||||
animation: scaleStar 2.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
transform-origin: 86px 55px;
|
||||
animation: scaleStar 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
transform-origin: 110px 35px;
|
||||
animation: scaleStar 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes scaleStar {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLock {
|
||||
0%, 70% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
80%, 100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
<g filter="url(#filter0_d_5165_11582)">
|
||||
<path d="M136.886 50.891C136.692 50.891 136.5 50.9011 136.307 50.9056C136.307 50.9007 136.308 50.8959 136.308 50.891C136.308 33.8304 122.443 20 105.341 20C91.4525 20 79.7 29.1205 75.7729 41.6845C72.8083 40.1271 69.4339 39.2413 65.8505 39.2413C54.0711 39.2413 44.5221 48.7669 44.5221 60.5175C44.5221 62.4317 44.7796 64.2852 45.2548 66.0498C43.1152 65.1017 40.7524 64.5641 38.2603 64.5641C28.7277 64.5641 21 72.2729 21 81.782C21 91.2912 28.7277 99 38.2603 99H136.886C150.204 99 161 88.2305 161 74.9455C161 61.6604 150.204 50.891 136.886 50.891Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5165_11582)">
|
||||
<path d="M118.602 70.8526C118.752 70.8526 118.9 70.8603 119.049 70.8638C119.049 70.8601 119.048 70.8563 119.048 70.8526C119.048 57.6792 129.744 47 142.937 47C153.651 47 162.717 54.0424 165.747 63.7438C168.034 62.5412 170.637 61.8572 173.401 61.8572C182.488 61.8572 189.854 69.2124 189.854 78.2856C189.854 79.7637 189.656 81.1949 189.289 82.5574C190.94 81.8253 192.762 81.4102 194.685 81.4102C202.039 81.4102 208 87.3626 208 94.7051C208 102.048 202.039 108 194.685 108H118.602C108.328 108 100 99.6843 100 89.4262C100 79.1682 108.328 70.8526 118.602 70.8526Z" fill="white"/>
|
||||
</g>
|
||||
<!-- Star Group 1 (Upper Star) -->
|
||||
<g class="star-1">
|
||||
<!-- Stars -->
|
||||
<g class="animate-pulse-first" style="transform-origin: 115px 70px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.158 72.4934C104.154 72.3084 104.215 72.1278 104.332 71.9837C104.448 71.8397 104.611 71.7415 104.793 71.7067C106.344 71.4261 110.627 70.414 112.09 68.974C113.553 67.534 114.542 63.2509 114.813 61.6775C114.846 61.4957 114.943 61.3317 115.087 61.2152C115.23 61.0987 115.411 61.0375 115.595 61.0427V72.4934H104.158Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.543 61.0422C115.729 61.0429 115.908 61.1094 116.05 61.2298C116.191 61.3502 116.285 61.5168 116.316 61.7001C116.578 63.2412 117.54 67.4553 118.989 69.0149C120.438 70.5745 124.744 71.4808 126.396 71.7752C126.577 71.8108 126.741 71.909 126.858 72.0527C126.975 72.1965 127.037 72.3767 127.035 72.5619H115.534L115.543 61.0422Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.603 72.4944V83.9451C115.417 83.9396 115.239 83.8716 115.097 83.7522C114.955 83.6328 114.858 83.469 114.821 83.2873C114.54 81.7185 113.528 77.371 112.088 75.9264C110.648 74.4818 106.36 73.5295 104.81 73.2673C104.628 73.2379 104.463 73.145 104.343 73.0052C104.224 72.8653 104.158 72.6876 104.157 72.5036L115.603 72.4944Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.035 72.4944C127.042 72.6817 126.978 72.8648 126.856 73.0072C126.734 73.1496 126.563 73.2408 126.377 73.2627C124.813 73.5295 120.451 74.4864 118.988 75.9356C117.525 77.3848 116.578 81.6863 116.315 83.3241C116.289 83.5107 116.196 83.6816 116.054 83.8057C115.913 83.9298 115.731 83.9989 115.542 84.0003V72.499L127.035 72.4944Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<!-- Star Group 2 (Middle Star) -->
|
||||
<g class="star-2">
|
||||
<g class="animate-pulse-second" style="transform-origin: 86px 45px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M66.3897 55.499C66.3844 55.1803 66.4907 54.8697 66.6902 54.6211C66.8897 54.3725 67.1698 54.2014 67.4821 54.1374C70.1596 53.6293 77.5519 51.9121 80.077 49.4277C82.6021 46.9432 84.3091 39.5509 84.7918 36.8328C84.8509 36.519 85.02 36.2367 85.2687 36.0365C85.5173 35.8362 85.8292 35.7313 86.1483 35.7404V55.499H66.3897Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.0412 35.7399C86.361 35.7396 86.6703 35.8537 86.9135 36.0614C87.1566 36.2691 87.3175 36.5569 87.3672 36.8729C87.8245 39.5351 89.4807 46.8055 91.9855 49.4982C94.4903 52.191 101.898 53.7507 104.763 54.2334C105.079 54.2933 105.363 54.4628 105.566 54.7119C105.768 54.9611 105.877 55.2739 105.871 55.595H86.0564L86.0412 35.7399Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.1483 55.4983V75.2569C85.8291 75.2473 85.5224 75.1302 85.2781 74.9246C85.0337 74.719 84.8659 74.4368 84.802 74.1239C84.3193 71.4159 82.5716 63.9169 80.0871 61.4223C77.6027 58.9277 70.2053 57.2867 67.5227 56.8497C67.2104 56.7961 66.9268 56.6345 66.7216 56.393C66.5164 56.1516 66.4025 55.8457 66.3999 55.5288L86.1483 55.4983Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.871 55.4983C105.88 55.8217 105.768 56.137 105.558 56.3829C105.348 56.6289 105.053 56.788 104.733 56.8294C102.04 57.2867 94.5103 58.9328 91.9852 61.4376C89.4601 63.9423 87.8242 71.36 87.3669 74.19C87.3229 74.511 87.1646 74.8054 86.921 75.0191C86.6774 75.2328 86.3649 75.3515 86.0409 75.3534V55.4983H105.871Z" fill="#007BED"/>
|
||||
</g>
|
||||
|
||||
<!-- Star Group 3 (Lower Star) -->
|
||||
<g class="star-3">
|
||||
<g class="animate-pulse-third" style="transform-origin: 110px 35px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.304 34.5404C102.302 34.4192 102.343 34.3013 102.418 34.2065C102.494 34.1117 102.6 34.046 102.718 34.0205C103.744 33.8365 106.564 33.174 107.526 32.2217C108.487 31.2694 109.14 28.4539 109.329 27.4141C109.352 27.296 109.416 27.1897 109.509 27.114C109.602 27.0383 109.72 26.9979 109.84 27.0001V34.5404H102.304Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.802 27.0047C109.925 27.0051 110.043 27.0487 110.136 27.1278C110.23 27.2069 110.292 27.3165 110.313 27.4372C110.483 28.4539 111.118 31.228 112.07 32.2539C113.023 33.2798 115.861 33.8779 116.952 34.0665C117.071 34.0892 117.179 34.1532 117.257 34.2474C117.334 34.3416 117.376 34.4599 117.375 34.5818H109.802V27.0047Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.84 34.5398V42.0847C109.719 42.08 109.602 42.0349 109.51 41.9565C109.417 41.8781 109.354 41.771 109.329 41.6522C109.14 40.6171 108.478 37.7556 107.526 36.7941C106.573 35.8325 103.753 35.2161 102.732 35.0459C102.612 35.0262 102.503 34.9644 102.425 34.8717C102.346 34.7789 102.304 34.6612 102.304 34.5398H109.84Z" fill="#00B3F4"/>
|
||||
|
|
@ -120,11 +89,11 @@
|
|||
<g filter="url(#filter2_d_5165_11582)">
|
||||
<circle cx="62" cy="101" r="20" fill="white"/>
|
||||
</g>
|
||||
<path class="lock" d="M69.4686 99.5822C69.4686 99.4454 69.4142 99.3142 69.3175 99.2175C69.2207 99.1207 69.0895 99.0664 68.9526 99.0664H54.5153C54.3786 99.0666 54.2475 99.121 54.1509 99.2177C54.0543 99.3144 54 99.4455 54 99.5822C54 99.5822 54 105.145 54 109H57.8779H61.7557H69.4686V99.5822ZM54 110.485C54 110.621 54.0543 110.752 54.1509 110.849C54.2476 110.946 54.3786 111 54.5153 111H68.9526C69.0203 111 69.0874 110.987 69.15 110.961C69.2126 110.935 69.2695 110.897 69.3174 110.849C69.3654 110.801 69.4034 110.745 69.4293 110.682C69.4552 110.619 69.4686 110.552 69.4686 110.485V109H61.7557H57.8779H54C54 109.403 54 110.485 54 110.485ZM58.5329 96.8007C58.5329 95.946 58.8724 95.1262 59.4768 94.5218C60.0812 93.9174 60.901 93.5779 61.7557 93.5779C62.6105 93.5779 63.4302 93.9174 64.0346 94.5218C64.639 95.1262 64.9786 95.946 64.9786 96.8007V99.5H67.5564V96.8007C67.5564 96.039 67.4064 95.2847 67.1149 94.5809C66.8234 93.8771 66.3961 93.2376 65.8575 92.699C65.3188 92.1603 64.6793 91.7331 63.9756 91.4416C63.2718 91.15 62.5175 91 61.7557 91C60.2173 91 58.7418 91.6111 57.654 92.699C56.5661 93.7868 55.955 95.2623 55.955 96.8007V99.5H58.5329V96.8007Z" fill="#1CC5A0"/>
|
||||
<path class="asterisk-1" d="M89.8553 116.969L89.8431 117.178C89.7963 117.982 90.4357 118.66 91.241 118.66C92.045 118.66 92.6839 117.984 92.6392 117.182L92.6273 116.968C92.5546 115.663 93.9903 114.824 95.0913 115.529L95.3944 115.723C96.0538 116.144 96.9314 115.935 97.3292 115.261C97.739 114.566 97.4696 113.67 96.7447 113.317L96.5551 113.224C95.3742 112.648 95.3742 110.965 96.5551 110.39L96.7447 110.297C97.4695 109.944 97.739 109.047 97.3292 108.353C96.9314 107.679 96.0538 107.469 95.3944 107.891L95.0912 108.085C93.9903 108.789 92.5546 107.95 92.6273 106.645L92.6392 106.432C92.6839 105.629 92.045 104.954 91.241 104.954C90.4357 104.954 89.7963 105.631 89.8431 106.435L89.8553 106.645C89.9312 107.948 88.4979 108.787 87.3984 108.084L87.097 107.891C86.4373 107.469 85.5591 107.679 85.1611 108.353C84.7513 109.048 85.0202 109.944 85.7445 110.298L85.933 110.39C87.1117 110.967 87.1117 112.647 85.933 113.223L85.7445 113.315C85.0201 113.67 84.7513 114.566 85.1611 115.26C85.5591 115.935 86.4373 116.144 87.097 115.722L87.3984 115.529C88.4978 114.826 89.9312 115.666 89.8553 116.969Z" fill="white"/>
|
||||
<path class="asterisk-2" d="M112.454 116.969L112.442 117.178C112.395 117.982 113.035 118.66 113.84 118.66C114.644 118.66 115.283 117.984 115.238 117.182L115.226 116.968C115.154 115.663 116.589 114.824 117.69 115.529L117.993 115.723C118.653 116.144 119.53 115.935 119.928 115.261C120.338 114.566 120.069 113.67 119.344 113.317L119.154 113.224C117.973 112.648 117.973 110.965 119.154 110.39L119.344 110.297C120.069 109.944 120.338 109.047 119.928 108.353C119.53 107.679 118.653 107.469 117.993 107.891L117.69 108.085C116.589 108.789 115.154 107.95 115.226 106.645L115.238 106.432C115.283 105.629 114.644 104.954 113.84 104.954C113.035 104.954 112.395 105.631 112.442 106.435L112.454 106.645C112.53 107.948 111.097 108.787 109.997 108.084L109.696 107.891C109.036 107.469 108.158 107.679 107.76 108.353C107.35 109.048 107.619 109.944 108.344 110.298L108.532 110.39C109.711 110.967 109.711 112.647 108.532 113.223L108.343 113.315C107.619 113.67 107.35 114.566 107.76 115.26C108.158 115.935 109.036 116.144 109.696 115.722L109.997 115.529C111.097 114.826 112.53 115.666 112.454 116.969Z" fill="white"/>
|
||||
<path class="asterisk-3" d="M134.454 116.969L134.442 117.178C134.395 117.982 135.035 118.66 135.84 118.66C136.644 118.66 137.283 117.984 137.238 117.182L137.226 116.968C137.154 115.663 138.589 114.824 139.69 115.529L139.993 115.723C140.653 116.144 141.53 115.935 141.928 115.261C142.338 114.566 142.069 113.67 141.344 113.317L141.154 113.224C139.973 112.648 139.973 110.965 141.154 110.39L141.344 110.297C142.069 109.944 142.338 109.047 141.928 108.353C141.53 107.679 140.653 107.469 139.993 107.891L139.69 108.085C138.589 108.789 137.154 107.95 137.226 106.645L137.238 106.432C137.283 105.629 136.644 104.954 135.84 104.954C135.035 104.954 134.395 105.631 134.442 106.435L134.454 106.645C134.53 107.948 133.097 108.787 131.997 108.084L131.696 107.891C131.036 107.469 130.158 107.679 129.76 108.353C129.35 109.048 129.619 109.944 130.344 110.298L130.532 110.39C131.711 110.967 131.711 112.647 130.532 113.223L130.343 113.315C129.619 113.67 129.35 114.566 129.76 115.26C130.158 115.935 131.036 116.144 131.696 115.722L131.997 115.529C133.097 114.826 134.53 115.666 134.454 116.969Z" fill="white"/>
|
||||
<path class="asterisk-4" d="M156.454 116.969L156.442 117.178C156.395 117.982 157.035 118.66 157.84 118.66C158.644 118.66 159.283 117.984 159.238 117.182L159.226 116.968C159.154 115.663 160.589 114.824 161.69 115.529L161.993 115.723C162.653 116.144 163.53 115.935 163.928 115.261C164.338 114.566 164.069 113.67 163.344 113.317L163.154 113.224C161.973 112.648 161.973 110.965 163.154 110.39L163.344 110.297C164.069 109.944 164.338 109.047 163.928 108.353C163.53 107.679 162.653 107.469 161.993 107.891L161.69 108.085C160.589 108.789 159.154 107.95 159.226 106.645L159.238 106.432C159.283 105.629 158.644 104.954 157.84 104.954C157.035 104.954 156.395 105.631 156.442 106.435L156.454 106.645C156.53 107.948 155.097 108.787 153.997 108.084L153.696 107.891C153.036 107.469 152.158 107.679 151.76 108.353C151.35 109.048 151.619 109.944 152.344 110.298L152.532 110.39C153.711 110.967 153.711 112.647 152.532 113.223L152.343 113.315C151.619 113.67 151.35 114.566 151.76 115.26C152.158 115.935 153.036 116.144 153.696 115.722L153.997 115.529C155.097 114.826 156.53 115.666 156.454 116.969Z" fill="white"/>
|
||||
<path class="animate-wait-and-rotate" style="transform-origin: 62px 102px" d="M69.4686 99.5822C69.4686 99.4454 69.4142 99.3142 69.3175 99.2175C69.2207 99.1207 69.0895 99.0664 68.9526 99.0664H54.5153C54.3786 99.0666 54.2475 99.121 54.1509 99.2177C54.0543 99.3144 54 99.4455 54 99.5822C54 99.5822 54 105.145 54 109H57.8779H61.7557H69.4686V99.5822ZM54 110.485C54 110.621 54.0543 110.752 54.1509 110.849C54.2476 110.946 54.3786 111 54.5153 111H68.9526C69.0203 111 69.0874 110.987 69.15 110.961C69.2126 110.935 69.2695 110.897 69.3174 110.849C69.3654 110.801 69.4034 110.745 69.4293 110.682C69.4552 110.619 69.4686 110.552 69.4686 110.485V109H61.7557H57.8779H54C54 109.403 54 110.485 54 110.485ZM58.5329 96.8007C58.5329 95.946 58.8724 95.1262 59.4768 94.5218C60.0812 93.9174 60.901 93.5779 61.7557 93.5779C62.6105 93.5779 63.4302 93.9174 64.0346 94.5218C64.639 95.1262 64.9786 95.946 64.9786 96.8007V99.5H67.5564V96.8007C67.5564 96.039 67.4064 95.2847 67.1149 94.5809C66.8234 93.8771 66.3961 93.2376 65.8575 92.699C65.3188 92.1603 64.6793 91.7331 63.9756 91.4416C63.2718 91.15 62.5175 91 61.7557 91C60.2173 91 58.7418 91.6111 57.654 92.699C56.5661 93.7868 55.955 95.2623 55.955 96.8007V99.5H58.5329V96.8007Z" fill="#1CC5A0"/>
|
||||
<path class="animate-type-first-repeat" d="M89.8553 116.969L89.8431 117.178C89.7963 117.982 90.4357 118.66 91.241 118.66C92.045 118.66 92.6839 117.984 92.6392 117.182L92.6273 116.968C92.5546 115.663 93.9903 114.824 95.0913 115.529L95.3944 115.723C96.0538 116.144 96.9314 115.935 97.3292 115.261C97.739 114.566 97.4696 113.67 96.7447 113.317L96.5551 113.224C95.3742 112.648 95.3742 110.965 96.5551 110.39L96.7447 110.297C97.4695 109.944 97.739 109.047 97.3292 108.353C96.9314 107.679 96.0538 107.469 95.3944 107.891L95.0912 108.085C93.9903 108.789 92.5546 107.95 92.6273 106.645L92.6392 106.432C92.6839 105.629 92.045 104.954 91.241 104.954C90.4357 104.954 89.7963 105.631 89.8431 106.435L89.8553 106.645C89.9312 107.948 88.4979 108.787 87.3984 108.084L87.097 107.891C86.4373 107.469 85.5591 107.679 85.1611 108.353C84.7513 109.048 85.0202 109.944 85.7445 110.298L85.933 110.39C87.1117 110.967 87.1117 112.647 85.933 113.223L85.7445 113.315C85.0201 113.67 84.7513 114.566 85.1611 115.26C85.5591 115.935 86.4373 116.144 87.097 115.722L87.3984 115.529C88.4978 114.826 89.9312 115.666 89.8553 116.969Z" fill="white"/>
|
||||
<path class="animate-type-second-repeat" d="M112.454 116.969L112.442 117.178C112.395 117.982 113.035 118.66 113.84 118.66C114.644 118.66 115.283 117.984 115.238 117.182L115.226 116.968C115.154 115.663 116.589 114.824 117.69 115.529L117.993 115.723C118.653 116.144 119.53 115.935 119.928 115.261C120.338 114.566 120.069 113.67 119.344 113.317L119.154 113.224C117.973 112.648 117.973 110.965 119.154 110.39L119.344 110.297C120.069 109.944 120.338 109.047 119.928 108.353C119.53 107.679 118.653 107.469 117.993 107.891L117.69 108.085C116.589 108.789 115.154 107.95 115.226 106.645L115.238 106.432C115.283 105.629 114.644 104.954 113.84 104.954C113.035 104.954 112.395 105.631 112.442 106.435L112.454 106.645C112.53 107.948 111.097 108.787 109.997 108.084L109.696 107.891C109.036 107.469 108.158 107.679 107.76 108.353C107.35 109.048 107.619 109.944 108.344 110.298L108.532 110.39C109.711 110.967 109.711 112.647 108.532 113.223L108.343 113.315C107.619 113.67 107.35 114.566 107.76 115.26C108.158 115.935 109.036 116.144 109.696 115.722L109.997 115.529C111.097 114.826 112.53 115.666 112.454 116.969Z" fill="white"/>
|
||||
<path class="animate-type-third-repeat" d="M134.454 116.969L134.442 117.178C134.395 117.982 135.035 118.66 135.84 118.66C136.644 118.66 137.283 117.984 137.238 117.182L137.226 116.968C137.154 115.663 138.589 114.824 139.69 115.529L139.993 115.723C140.653 116.144 141.53 115.935 141.928 115.261C142.338 114.566 142.069 113.67 141.344 113.317L141.154 113.224C139.973 112.648 139.973 110.965 141.154 110.39L141.344 110.297C142.069 109.944 142.338 109.047 141.928 108.353C141.53 107.679 140.653 107.469 139.993 107.891L139.69 108.085C138.589 108.789 137.154 107.95 137.226 106.645L137.238 106.432C137.283 105.629 136.644 104.954 135.84 104.954C135.035 104.954 134.395 105.631 134.442 106.435L134.454 106.645C134.53 107.948 133.097 108.787 131.997 108.084L131.696 107.891C131.036 107.469 130.158 107.679 129.76 108.353C129.35 109.048 129.619 109.944 130.344 110.298L130.532 110.39C131.711 110.967 131.711 112.647 130.532 113.223L130.343 113.315C129.619 113.67 129.35 114.566 129.76 115.26C130.158 115.935 131.036 116.144 131.696 115.722L131.997 115.529C133.097 114.826 134.53 115.666 134.454 116.969Z" fill="white"/>
|
||||
<path class="animate-type-fourth-repeat" d="M156.454 116.969L156.442 117.178C156.395 117.982 157.035 118.66 157.84 118.66C158.644 118.66 159.283 117.984 159.238 117.182L159.226 116.968C159.154 115.663 160.589 114.824 161.69 115.529L161.993 115.723C162.653 116.144 163.53 115.935 163.928 115.261C164.338 114.566 164.069 113.67 163.344 113.317L163.154 113.224C161.973 112.648 161.973 110.965 163.154 110.39L163.344 110.297C164.069 109.944 164.338 109.047 163.928 108.353C163.53 107.679 162.653 107.469 161.993 107.891L161.69 108.085C160.589 108.789 159.154 107.95 159.226 106.645L159.238 106.432C159.283 105.629 158.644 104.954 157.84 104.954C157.035 104.954 156.395 105.631 156.442 106.435L156.454 106.645C156.53 107.948 155.097 108.787 153.997 108.084L153.696 107.891C153.036 107.469 152.158 107.679 151.76 108.353C151.35 109.048 151.619 109.944 152.344 110.298L152.532 110.39C153.711 110.967 153.711 112.647 152.532 113.223L152.343 113.315C151.619 113.67 151.35 114.566 151.76 115.26C152.158 115.935 153.036 116.144 153.696 115.722L153.997 115.529C155.097 114.826 156.53 115.666 156.454 116.969Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_5165_11582" x="-11" y="-14" width="204" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 16 KiB После Ширина: | Высота: | Размер: 16 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 5.4 KiB После Ширина: | Высота: | Размер: 5.5 KiB |
|
|
@ -1,38 +1,30 @@
|
|||
<svg width="205" height="160" viewBox="0 0 205 160" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.checkmark {
|
||||
.animate-draw-stroke {
|
||||
animation: drawCheckmark 3s ease-in forwards;
|
||||
}
|
||||
|
||||
.star1 {
|
||||
transform-origin: 152px 76px;
|
||||
animation: scaleStar 2s infinite ease-in-out;
|
||||
.animate-pulse-first {
|
||||
animation: twinkle 2.5s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
.star2 {
|
||||
transform-origin: 174px 63px;
|
||||
animation: scaleStar 3s infinite ease-in-out;
|
||||
.animate-pulse-second {
|
||||
animation: twinkle 3s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
.star3 {
|
||||
transform-origin: 156px 47px;
|
||||
animation: scaleStar 2s infinite ease-in-out;
|
||||
.animate-pulse-third {
|
||||
animation: twinkle 3.5s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
.circle {
|
||||
transform-origin: 58px 115px;
|
||||
.animate-wait-and-appear {
|
||||
animation: scaleCircle 2s ease-out 1;
|
||||
}
|
||||
|
||||
@keyframes scaleStar {
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
transform: scale(0.9);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drawCheckmark {
|
||||
0%, 50% {
|
||||
stroke-dasharray: 100;
|
||||
|
|
@ -42,7 +34,6 @@
|
|||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleCircle {
|
||||
0%, 40% {
|
||||
transform: scale(0);
|
||||
|
|
@ -58,7 +49,7 @@
|
|||
<circle cx="95.1354" cy="102.607" r="16.1909" fill="white"/>
|
||||
<path d="M156.752 98.0741H118.33C115.995 88.3016 107.318 81 96.9746 81C84.8406 81 75 91.0385 75 103.343C75 115.647 84.8406 125.685 96.9746 125.685C108.058 125.685 117.114 117.286 118.623 106.477H144.216V117.215C144.216 119.518 146.057 121.417 148.362 121.417C150.668 121.417 152.509 119.518 152.509 117.215V106.477H156.752C159.058 106.477 160.898 104.578 160.898 102.275C160.898 99.9725 159.058 98.0741 156.752 98.0741ZM96.9746 117.282C89.447 117.282 83.2924 111.045 83.2924 103.343C83.2924 95.6402 89.447 89.4028 96.9746 89.4028C104.502 89.4028 110.657 95.6402 110.657 103.343C110.657 111.045 104.502 117.282 96.9746 117.282Z" fill="#0190ED" stroke="#0190ED" stroke-width="2"/>
|
||||
<!-- Star 1 -->
|
||||
<g class="star1">
|
||||
<g class="animate-pulse-first" style="transform-origin: 152px 76px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M160.47 76.7347C160.473 76.5934 160.426 76.4555 160.338 76.3456C160.249 76.2356 160.124 76.1606 159.985 76.1341C158.801 75.9198 155.531 75.1471 154.414 74.0477C153.297 72.9483 152.542 69.6783 152.335 68.477C152.31 68.3382 152.236 68.2129 152.126 68.124C152.017 68.0351 151.879 67.9884 151.738 67.9923V76.7347H160.47Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.774 67.9921C151.632 67.9926 151.495 68.0434 151.387 68.1353C151.279 68.2272 151.207 68.3544 151.184 68.4943C150.984 69.671 150.25 72.8884 149.143 74.0791C148.037 75.2698 144.749 75.9617 143.488 76.1865C143.349 76.2137 143.225 76.2886 143.135 76.3984C143.046 76.5081 142.998 76.6457 143 76.7872H151.781L151.774 67.9921Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.727 76.735V85.4775C151.868 85.4732 152.004 85.4213 152.113 85.3302C152.221 85.239 152.295 85.1139 152.324 84.9752C152.538 83.7774 153.311 80.4582 154.41 79.3553C155.51 78.2524 158.783 77.5253 159.967 77.3251C160.105 77.3027 160.232 77.2318 160.323 77.125C160.414 77.0183 160.465 76.8826 160.466 76.7421L151.727 76.735Z" fill="#00B3F4"/>
|
||||
|
|
@ -66,7 +57,7 @@
|
|||
</g>
|
||||
|
||||
<!-- Star 2 -->
|
||||
<g class="star2">
|
||||
<g class='animate-pulse-second' style="transform-origin: 174px 63px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M189.302 63.7583C189.306 63.515 189.225 63.2779 189.073 63.088C188.92 62.8982 188.707 62.7676 188.468 62.7187C186.424 62.3308 180.78 61.0198 178.852 59.1229C176.924 57.2261 175.621 51.5822 175.253 49.507C175.207 49.2675 175.078 49.0519 174.888 48.8991C174.699 48.7462 174.461 48.666 174.217 48.673V63.7583H189.302Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M174.3 48.6727C174.056 48.6725 173.819 48.7596 173.634 48.9182C173.448 49.0768 173.325 49.2965 173.287 49.5377C172.938 51.5703 171.674 57.1211 169.761 59.177C167.849 61.2328 162.194 62.4236 160.006 62.7921C159.765 62.8379 159.548 62.9673 159.393 63.1575C159.238 63.3477 159.156 63.5865 159.16 63.8317H174.288L174.3 48.6727Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M174.217 63.7581V78.8433C174.461 78.836 174.695 78.7466 174.881 78.5896C175.068 78.4326 175.196 78.2172 175.245 77.9783C175.613 75.9108 176.948 70.1855 178.844 68.2809C180.741 66.3764 186.389 65.1235 188.437 64.7899C188.676 64.7489 188.892 64.6255 189.049 64.4412C189.205 64.2568 189.292 64.0233 189.294 63.7813L174.217 63.7581Z" fill="#00B3F4"/>
|
||||
|
|
@ -74,16 +65,16 @@
|
|||
</g>
|
||||
|
||||
<!-- Star 3 -->
|
||||
<g class="star3">
|
||||
<g class='animate-pulse-third' style="transform-origin: 156px 47px">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M161.886 47.7569C161.887 47.6644 161.856 47.5744 161.798 47.502C161.741 47.4296 161.66 47.3795 161.569 47.36C160.786 47.2195 158.633 46.7137 157.899 45.9867C157.165 45.2596 156.666 43.11 156.522 42.3162C156.505 42.226 156.456 42.1449 156.385 42.087C156.313 42.0292 156.224 41.9984 156.132 42.0001V47.7569H161.886Z" fill="#DABDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M156.16 42.0042C156.067 42.0045 155.976 42.0378 155.905 42.0982C155.834 42.1586 155.786 42.2422 155.77 42.3343C155.64 43.1106 155.156 45.2286 154.429 46.0118C153.701 46.7951 151.534 47.2517 150.702 47.3957C150.61 47.413 150.528 47.4619 150.469 47.5338C150.41 47.6057 150.378 47.6961 150.379 47.7891H156.16V42.0042Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M156.132 47.7563V53.5167C156.225 53.5131 156.313 53.4786 156.384 53.4188C156.455 53.3589 156.503 53.2772 156.522 53.1865C156.666 52.3962 157.172 50.2115 157.899 49.4774C158.626 48.7433 160.779 48.2726 161.559 48.1427C161.65 48.1276 161.734 48.0805 161.793 48.0097C161.853 47.9388 161.886 47.849 161.886 47.7563H156.132Z" fill="#00B3F4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M150.379 47.7563C150.376 47.8511 150.409 47.9434 150.471 48.0154C150.532 48.0874 150.618 48.134 150.712 48.1462C151.496 48.2761 153.691 48.7573 154.429 49.4879C155.166 50.2185 155.64 52.3821 155.77 53.204C155.781 53.3 155.827 53.3886 155.899 53.4533C155.971 53.518 156.064 53.5542 156.16 53.5553V47.7563H150.379Z" fill="#007BED"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_5165_11763)">
|
||||
<circle class="circle" cx="68" cy="114.5" r="22" fill="white"/>
|
||||
<circle class="animate-wait-and-appear" cx="68" cy="114.5" r="22" fill="white" style="transform-origin: 58px 115px"/>
|
||||
</g>
|
||||
<path class="checkmark" d="M57 115L64 122L78 108" stroke="#1CC5A0" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="animate-draw-stroke" d="M57 115L64 122L78 108" stroke="#1CC5A0" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<defs>
|
||||
<filter id="filter0_d_5165_11763" x="8" y="0" width="184" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 8.9 KiB После Ширина: | Высота: | Размер: 9.1 KiB |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="239" height="180" fill="none"><style>@keyframes smallCloudAnimation{0%{transform:translateX(-70px)}to{transform:translateX(0)}}@keyframes bulbLeftEyeAnimation{0%,10%{fill:#00b3f4}20%,to{fill:#fff}}@keyframes bulbMouthAnimation{0%,30%{fill:#00b3f4}40%,to{fill:#fff}}@keyframes bulbRightEyeAnimation{0%,20%{fill:#00b3f4}30%,to{fill:#fff}}@keyframes pinkLineAnimation{0%,to{stroke-dashoffset:6;stroke-dasharray:10}50%{stroke-dashoffset:0;stroke-dasharray:10}}.pinkLine{animation:pinkLineAnimation 2s linear infinite}</style><g filter="url(#filter0_d_5169_13123)"><path fill="#fff" d="M125.052 55.506c.137 0 .273.007.409.01v-.01c0-11.877 9.804-21.506 21.898-21.506 9.821 0 18.132 6.35 20.909 15.097a15.2 15.2 0 0 1 7.016-1.701c8.33 0 15.083 6.632 15.083 14.812 0 1.333-.183 2.624-.519 3.852a12.3 12.3 0 0 1 4.947-1.034c6.74 0 12.205 5.367 12.205 11.987S201.535 89 194.795 89h-69.743C115.634 89 108 81.502 108 72.253s7.634-16.747 17.052-16.747" style="animation:smallCloudAnimation 3s 1 ease-in-out"/></g><g filter="url(#filter1_d_5169_13123)"><path fill="#fff" d="M163.614 79.41c-.221 0-.438.011-.658.017l.001-.017c0-19.004-15.746-34.41-35.17-34.41-15.773 0-29.12 10.16-33.58 24.155a24.54 24.54 0 0 0-11.27-2.722c-13.378 0-24.223 10.611-24.223 23.7 0 2.133.293 4.197.833 6.163a19.9 19.9 0 0 0-7.944-1.655C40.776 94.641 32 103.228 32 113.82 32 124.413 40.776 133 51.603 133h112.011C178.739 133 191 121.004 191 106.205c0-14.798-12.261-26.795-27.386-26.795" class="bigCloud"/></g><rect width="22" height="5" x="115" y="156" fill="#0090ED" rx="2.5"/><rect width="24" height="5" x="114" y="149" fill="#0090ED" rx="2.5"/><path fill="#00B3F4" d="M119.549 143.851h12.709a6.715 6.715 0 0 0 6.632-5.583l1.218-7.759a22.71 22.71 0 0 0 6.39-27.495 22.7 22.7 0 0 0-6.22-7.918c-5.344-4.345-12.353-6.023-19.229-4.602-8.877 1.852-15.927 9.126-17.547 18.098-1.516 8.396 1.549 16.59 8.007 21.573l1.408 8.103a6.72 6.72 0 0 0 6.632 5.583" class="bulb"/><path fill="#fff" d="m119.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbLeftEyeAnimation 3s ease-in-out"/><path fill="#fff" d="M132.546 119c.803 0 1.467.656 1.322 1.446a7.997 7.997 0 0 1-10.929 5.945 8 8 0 0 1-4.807-5.945c-.145-.79.519-1.446 1.322-1.446s1.434.664 1.66 1.434q.077.262.182.515a5.1 5.1 0 0 0 1.103 1.652 5.1 5.1 0 0 0 5.55 1.103 5.1 5.1 0 0 0 1.652-1.103 5.1 5.1 0 0 0 1.285-2.167c.226-.77.857-1.434 1.66-1.434" style="animation:bulbMouthAnimation 3s ease-in-out"/><path fill="#fff" d="m133.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbRightEyeAnimation 3s ease-in-out"/><path stroke="#E31587" stroke-linecap="round" stroke-width="4" d="M95 113H85M102 90l-8-7M126 82V70M151 91l8-7M158 113h10" class="pinkLine"/><defs><filter id="filter0_d_5169_13123" width="239" height="119" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter><filter id="filter1_d_5169_13123" width="223" height="152" x="0" y="11" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter></defs></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="239" height="180" fill="none"><style>@keyframes smallCloudAnimation{0%{transform:translateX(-70px)}to{transform:translateX(0)}}@keyframes bulbLeftEyeAnimation{0%,10%{fill:#00b3f4}20%,to{fill:#fff}}@keyframes bulbMouthAnimation{0%,30%{fill:#00b3f4}40%,to{fill:#fff}}@keyframes bulbRightEyeAnimation{0%,20%{fill:#00b3f4}30%,to{fill:#fff}}@keyframes pinkLineAnimation{0%,to{stroke-dashoffset:6;stroke-dasharray:10}50%{stroke-dashoffset:0;stroke-dasharray:10}}.animate-pulse-stroke{animation:pinkLineAnimation 2s linear infinite}</style><g filter="url(#filter0_d_5169_13123)"><path fill="#fff" d="M125.052 55.506c.137 0 .273.007.409.01v-.01c0-11.877 9.804-21.506 21.898-21.506 9.821 0 18.132 6.35 20.909 15.097a15.2 15.2 0 0 1 7.016-1.701c8.33 0 15.083 6.632 15.083 14.812 0 1.333-.183 2.624-.519 3.852a12.3 12.3 0 0 1 4.947-1.034c6.74 0 12.205 5.367 12.205 11.987S201.535 89 194.795 89h-69.743C115.634 89 108 81.502 108 72.253s7.634-16.747 17.052-16.747" style="animation:smallCloudAnimation 3s 1 ease-in-out"/></g><g filter="url(#filter1_d_5169_13123)"><path fill="#fff" d="M163.614 79.41c-.221 0-.438.011-.658.017l.001-.017c0-19.004-15.746-34.41-35.17-34.41-15.773 0-29.12 10.16-33.58 24.155a24.54 24.54 0 0 0-11.27-2.722c-13.378 0-24.223 10.611-24.223 23.7 0 2.133.293 4.197.833 6.163a19.9 19.9 0 0 0-7.944-1.655C40.776 94.641 32 103.228 32 113.82 32 124.413 40.776 133 51.603 133h112.011C178.739 133 191 121.004 191 106.205c0-14.798-12.261-26.795-27.386-26.795"/></g><rect width="22" height="5" x="115" y="156" fill="#0090ED" rx="2.5"/><rect width="24" height="5" x="114" y="149" fill="#0090ED" rx="2.5"/><path fill="#00B3F4" d="M119.549 143.851h12.709a6.715 6.715 0 0 0 6.632-5.583l1.218-7.759a22.71 22.71 0 0 0 6.39-27.495 22.7 22.7 0 0 0-6.22-7.918c-5.344-4.345-12.353-6.023-19.229-4.602-8.877 1.852-15.927 9.126-17.547 18.098-1.516 8.396 1.549 16.59 8.007 21.573l1.408 8.103a6.72 6.72 0 0 0 6.632 5.583"/><path fill="#fff" d="m119.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbLeftEyeAnimation 3s ease-in-out"/><path fill="#fff" d="m133.385 107.759.704 3.028h-2.994l.704-3.028-2.34 2.11-1.459-2.582 2.994-.894-2.994-.943 1.535-2.532 2.264 2.11-.704-3.028h2.994l-.73 3.078 2.366-2.16 1.484 2.582-3.095.918 3.095.919-1.535 2.532z" style="animation:bulbRightEyeAnimation 3s ease-in-out"/><path fill="#fff" d="M132.546 119c.803 0 1.467.656 1.322 1.446a7.997 7.997 0 0 1-10.929 5.945 8 8 0 0 1-4.807-5.945c-.145-.79.519-1.446 1.322-1.446s1.434.664 1.66 1.434q.077.262.182.515a5.1 5.1 0 0 0 1.103 1.652 5.1 5.1 0 0 0 5.55 1.103 5.1 5.1 0 0 0 1.652-1.103 5.1 5.1 0 0 0 1.285-2.167c.226-.77.857-1.434 1.66-1.434" style="animation:bulbMouthAnimation 3s ease-in-out"/><path stroke="#E31587" stroke-linecap="round" stroke-width="4" d="M95 113H85M102 90l-8-7M126 82V70M151 91l8-7M158 113h10" class="animate-pulse-stroke"/><defs><filter id="filter0_d_5169_13123" width="239" height="119" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter><filter id="filter1_d_5169_13123" width="223" height="152" x="0" y="11" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.564706 0 0 0 0 0.929412 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5169_13123"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5169_13123" result="shape"/></filter></defs></svg>
|
||||
|
До Ширина: | Высота: | Размер: 4.2 KiB После Ширина: | Высота: | Размер: 4.2 KiB |
|
|
@ -1,75 +1,72 @@
|
|||
<svg width="239" height="180" viewBox="0 0 239 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.smallCloud {
|
||||
animation: smallCloudAnimation 3s 1 ease-in-out;
|
||||
}
|
||||
|
||||
.bulbLeftEye {
|
||||
animation: bulbLeftEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulbMouth {
|
||||
animation: bulbMouthAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulbRightEye {
|
||||
animation: bulbRightEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
|
||||
.pinkLine {
|
||||
animation: pinkLineAnimation 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes smallCloudAnimation {
|
||||
0% { transform: translateX(-70px); }
|
||||
100% { transform: translateX(0px); }
|
||||
}
|
||||
|
||||
@keyframes bulbLeftEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
10% { fill: #00B3F4; }
|
||||
20% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes bulbMouthAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
30% { fill: #00B3F4; }
|
||||
40% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes bulbRightEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
20% { fill: #00B3F4; }
|
||||
30% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
|
||||
@keyframes pinkLineAnimation {
|
||||
0% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
50% { stroke-dashoffset: 0; stroke-dasharray: 10 }
|
||||
100% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.animate-glide-right {
|
||||
animation: smallCloudAnimation 3s 1 ease-in-out;
|
||||
}
|
||||
.animate-appear-first {
|
||||
animation: bulbLeftEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
.animate-appear-second {
|
||||
animation: bulbRightEyeAnimation 3s ease-in-out;
|
||||
}
|
||||
.animate-appear-third {
|
||||
animation: bulbMouthAnimation 3s ease-in-out;
|
||||
}
|
||||
.animate-pulse-stroke {
|
||||
animation: pinkLineAnimation 2s linear infinite;
|
||||
}
|
||||
@keyframes smallCloudAnimation {
|
||||
0% { transform: translateX(-70px); }
|
||||
100% { transform: translateX(0px); }
|
||||
}
|
||||
@keyframes bulbLeftEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
10% { fill: #00B3F4; }
|
||||
20% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
@keyframes bulbMouthAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
30% { fill: #00B3F4; }
|
||||
40% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
@keyframes bulbRightEyeAnimation {
|
||||
0% { fill: #00B3F4; }
|
||||
20% { fill: #00B3F4; }
|
||||
30% { fill: white; }
|
||||
100% { fill: white; }
|
||||
}
|
||||
@keyframes pinkLineAnimation {
|
||||
0% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
50% { stroke-dashoffset: 0; stroke-dasharray: 10 }
|
||||
100% { stroke-dashoffset: 6; stroke-dasharray: 10 }
|
||||
}
|
||||
</style>
|
||||
<!-- small cloud -->
|
||||
<g filter="url(#filter0_d_5169_13123)">
|
||||
<path class="smallCloud" d="M125.052 55.5064C125.189 55.5064 125.325 55.5134 125.461 55.5166C125.461 55.5132 125.461 55.5098 125.461 55.5064C125.461 43.6287 135.265 34 147.359 34C157.18 34 165.491 40.3497 168.268 49.0968C170.364 48.0125 172.75 47.3958 175.284 47.3958C183.614 47.3958 190.367 54.0276 190.367 62.2084C190.367 63.541 190.184 64.8315 189.848 66.06C191.361 65.3999 193.032 65.0256 194.795 65.0256C201.535 65.0256 207 70.3925 207 77.0128C207 83.6331 201.535 89 194.795 89H125.052C115.634 89 108 81.5022 108 72.2532C108 63.0042 115.634 55.5064 125.052 55.5064Z" fill="white"/>
|
||||
<path class="animate-glide-right" d="M125.052 55.5064C125.189 55.5064 125.325 55.5134 125.461 55.5166C125.461 55.5132 125.461 55.5098 125.461 55.5064C125.461 43.6287 135.265 34 147.359 34C157.18 34 165.491 40.3497 168.268 49.0968C170.364 48.0125 172.75 47.3958 175.284 47.3958C183.614 47.3958 190.367 54.0276 190.367 62.2084C190.367 63.541 190.184 64.8315 189.848 66.06C191.361 65.3999 193.032 65.0256 194.795 65.0256C201.535 65.0256 207 70.3925 207 77.0128C207 83.6331 201.535 89 194.795 89H125.052C115.634 89 108 81.5022 108 72.2532C108 63.0042 115.634 55.5064 125.052 55.5064Z" fill="white"/>
|
||||
</g>
|
||||
<!-- big cloud -->
|
||||
<g filter="url(#filter1_d_5169_13123)">
|
||||
<path class="bigCloud" d="M163.614 79.4103C163.393 79.4103 163.176 79.4214 162.956 79.4265C162.956 79.4211 162.957 79.4157 162.957 79.4103C162.957 60.406 147.211 45 127.787 45C112.014 45 98.6665 55.1595 94.2064 69.1549C90.8394 67.42 87.007 66.4333 82.9373 66.4333C69.5593 66.4333 58.7144 77.0442 58.7144 90.1334C58.7144 92.2657 59.0068 94.3304 59.5465 96.2959C57.1166 95.2398 54.4331 94.641 51.6027 94.641C40.7764 94.641 32 103.228 32 113.82C32 124.413 40.7764 133 51.6027 133H163.614C178.739 133 191 121.004 191 106.205C191 91.4067 178.739 79.4103 163.614 79.4103Z" fill="white" />
|
||||
<path d="M163.614 79.4103C163.393 79.4103 163.176 79.4214 162.956 79.4265C162.956 79.4211 162.957 79.4157 162.957 79.4103C162.957 60.406 147.211 45 127.787 45C112.014 45 98.6665 55.1595 94.2064 69.1549C90.8394 67.42 87.007 66.4333 82.9373 66.4333C69.5593 66.4333 58.7144 77.0442 58.7144 90.1334C58.7144 92.2657 59.0068 94.3304 59.5465 96.2959C57.1166 95.2398 54.4331 94.641 51.6027 94.641C40.7764 94.641 32 103.228 32 113.82C32 124.413 40.7764 133 51.6027 133H163.614C178.739 133 191 121.004 191 106.205C191 91.4067 178.739 79.4103 163.614 79.4103Z" fill="white" />
|
||||
</g>
|
||||
<!-- lightbulb -->
|
||||
<rect x="115" y="156" width="22" height="5" rx="2.5" fill="#0090ED"/>
|
||||
<rect x="114" y="149" width="24" height="5" rx="2.5" fill="#0090ED"/>
|
||||
<path class="bulb" d="M119.549 143.851H132.258C133.845 143.854 135.381 143.294 136.595 142.272C137.809 141.25 138.622 139.832 138.89 138.268L140.108 130.509C142.768 128.394 144.92 125.708 146.404 122.651C147.888 119.594 148.667 116.242 148.683 112.843C148.699 109.445 147.953 106.086 146.498 103.014C145.043 99.9426 142.917 97.2367 140.278 95.0961C134.934 90.7508 127.925 89.0731 121.049 90.494C112.172 92.3456 105.122 99.6195 103.502 108.592C101.986 116.988 105.051 125.182 111.509 130.165L112.917 138.268C113.185 139.832 113.997 141.251 115.211 142.273C116.425 143.295 117.962 143.855 119.549 143.851Z" fill="#00B3F4"/>
|
||||
<path class="bulbLeftEye" d="M119.385 107.759L120.089 110.787H117.095L117.799 107.759L115.459 109.869L114 107.287L116.994 106.393L114 105.45L115.535 102.918L117.799 105.028L117.095 102H120.089L119.359 105.078L121.725 102.918L123.209 105.5L120.114 106.418L123.209 107.337L121.674 109.869L119.385 107.759Z" fill="white"/>
|
||||
<path class="bulbMouth" d="M132.546 119C133.349 119 134.013 119.656 133.868 120.446C133.767 120.998 133.607 121.54 133.391 122.061C132.989 123.032 132.4 123.914 131.657 124.657C130.914 125.4 130.032 125.989 129.061 126.391C128.091 126.793 127.051 127 126 127C124.949 127 123.909 126.793 122.939 126.391C121.968 125.989 121.086 125.4 120.343 124.657C119.6 123.914 119.011 123.032 118.609 122.061C118.393 121.54 118.233 120.998 118.132 120.446C117.987 119.656 118.651 119 119.454 119C120.257 119 120.888 119.664 121.114 120.434C121.165 120.609 121.226 120.78 121.296 120.949C121.551 121.566 121.927 122.128 122.399 122.601C122.872 123.073 123.434 123.449 124.051 123.704C124.669 123.96 125.331 124.092 126 124.092C126.669 124.092 127.331 123.96 127.949 123.704C128.566 123.449 129.128 123.073 129.601 122.601C130.073 122.128 130.449 121.566 130.704 120.949C130.774 120.78 130.835 120.609 130.886 120.434C131.112 119.664 131.743 119 132.546 119Z" fill="white"/>
|
||||
<path class="bulbRightEye" d="M133.385 107.759L134.089 110.787H131.095L131.799 107.759L129.459 109.869L128 107.287L130.994 106.393L128 105.45L129.535 102.918L131.799 105.028L131.095 102H134.089L133.359 105.078L135.725 102.918L137.209 105.5L134.114 106.418L137.209 107.337L135.674 109.869L133.385 107.759Z" fill="white"/>
|
||||
<path class="pinkLine" d="M95 113L85 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M102 90L94 83" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M126 82L126 70" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M151 91L159 84" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="pinkLine" d="M158 113L168 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M119.549 143.851H132.258C133.845 143.854 135.381 143.294 136.595 142.272C137.809 141.25 138.622 139.832 138.89 138.268L140.108 130.509C142.768 128.394 144.92 125.708 146.404 122.651C147.888 119.594 148.667 116.242 148.683 112.843C148.699 109.445 147.953 106.086 146.498 103.014C145.043 99.9426 142.917 97.2367 140.278 95.0961C134.934 90.7508 127.925 89.0731 121.049 90.494C112.172 92.3456 105.122 99.6195 103.502 108.592C101.986 116.988 105.051 125.182 111.509 130.165L112.917 138.268C113.185 139.832 113.997 141.251 115.211 142.273C116.425 143.295 117.962 143.855 119.549 143.851Z" fill="#00B3F4"/>
|
||||
<!-- left eye -->
|
||||
<path class="animate-appear-first" d="M119.385 107.759L120.089 110.787H117.095L117.799 107.759L115.459 109.869L114 107.287L116.994 106.393L114 105.45L115.535 102.918L117.799 105.028L117.095 102H120.089L119.359 105.078L121.725 102.918L123.209 105.5L120.114 106.418L123.209 107.337L121.674 109.869L119.385 107.759Z" fill="white"/>
|
||||
<!-- right eye -->
|
||||
<path class="animate-appear-second" d="M133.385 107.759L134.089 110.787H131.095L131.799 107.759L129.459 109.869L128 107.287L130.994 106.393L128 105.45L129.535 102.918L131.799 105.028L131.095 102H134.089L133.359 105.078L135.725 102.918L137.209 105.5L134.114 106.418L137.209 107.337L135.674 109.869L133.385 107.759Z" fill="white"/>
|
||||
<!-- mouth -->
|
||||
<path class="animate-appear-third" d="M132.546 119C133.349 119 134.013 119.656 133.868 120.446C133.767 120.998 133.607 121.54 133.391 122.061C132.989 123.032 132.4 123.914 131.657 124.657C130.914 125.4 130.032 125.989 129.061 126.391C128.091 126.793 127.051 127 126 127C124.949 127 123.909 126.793 122.939 126.391C121.968 125.989 121.086 125.4 120.343 124.657C119.6 123.914 119.011 123.032 118.609 122.061C118.393 121.54 118.233 120.998 118.132 120.446C117.987 119.656 118.651 119 119.454 119C120.257 119 120.888 119.664 121.114 120.434C121.165 120.609 121.226 120.78 121.296 120.949C121.551 121.566 121.927 122.128 122.399 122.601C122.872 123.073 123.434 123.449 124.051 123.704C124.669 123.96 125.331 124.092 126 124.092C126.669 124.092 127.331 123.96 127.949 123.704C128.566 123.449 129.128 123.073 129.601 122.601C130.073 122.128 130.449 121.566 130.704 120.949C130.774 120.78 130.835 120.609 130.886 120.434C131.112 119.664 131.743 119 132.546 119Z" fill="white"/>
|
||||
<!-- rays around bulb -->
|
||||
<path class="animate-pulse-stroke" d="M95 113L85 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="animate-pulse-stroke" d="M102 90L94 83" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="animate-pulse-stroke" d="M126 82L126 70" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="animate-pulse-stroke" d="M151 91L159 84" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="animate-pulse-stroke" d="M158 113L168 113" stroke="#E31587" stroke-width="4" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_5169_13123" x="0" y="0" width="239" height="119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 6.9 KiB После Ширина: | Высота: | Размер: 7.0 KiB |
|
|
@ -61,7 +61,48 @@ config.theme.extend = {
|
|||
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-.25rem)' },
|
||||
'20%, 40%, 60%, 80%': { transform: 'translateX(.25rem)' },
|
||||
},
|
||||
twinkle: {
|
||||
'0%, 100%': { transform: 'scale(0.9)', opacity: 0.2 },
|
||||
'50%': { transform: 'scale(1.1)', opacity: 1 },
|
||||
},
|
||||
'glide-right': {
|
||||
'0%': { transform: 'translateX(-70px)' },
|
||||
'100%': { transform: 'translateX(0px)' },
|
||||
},
|
||||
'appear-first': {
|
||||
'0%, 10%': { opacity: 0 },
|
||||
'20%, 90%': { opacity: 1 },
|
||||
},
|
||||
'appear-second': {
|
||||
'0%, 20%': { opacity: 0 },
|
||||
'30%, 100%': { opacity: 1 },
|
||||
},
|
||||
'appear-third': {
|
||||
'0%, 30%': { opacity: 0 },
|
||||
'40%, 100%': { opacity: 1 },
|
||||
},
|
||||
'appear-fourth': {
|
||||
'0%, 40%': { opacity: 0 },
|
||||
'50%, 100%': { opacity: 1 },
|
||||
},
|
||||
'draw-stroke': {
|
||||
'0%, 50%': { strokeDashoffset: 100, strokeDasharray: 100 },
|
||||
'60%, 100%': { strokeDashoffset: 0 },
|
||||
},
|
||||
'pulse-stroke': {
|
||||
'0%, 100%': { 'stroke-dashoffset': 6, 'stroke-dasharray': 10 },
|
||||
'50%': { 'stroke-dashoffset': 0, 'stroke-dasharray': 10 },
|
||||
},
|
||||
'wait-and-appear': {
|
||||
'0%, 40%': { transform: 'scale(0)' },
|
||||
'60%, 100%': { transform: 'scale(1)' },
|
||||
},
|
||||
'wait-and-rotate': {
|
||||
'0%, 70%': { transform: 'rotate(0deg)' },
|
||||
'80%, 100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
},
|
||||
|
||||
animation: {
|
||||
...config.theme.extend.animation,
|
||||
sparkle: 'sparkle 2s ease-in-out infinite',
|
||||
|
|
@ -72,6 +113,21 @@ config.theme.extend = {
|
|||
'pulse-up': 'pulse-up 5s ease-in-out infinite',
|
||||
heart: 'beat 1.5s infinite',
|
||||
shake: 'shake 1s',
|
||||
'pulse-first': 'twinkle 2.5s infinite ease-in-out alternate',
|
||||
'pulse-second': 'twinkle 3s infinite ease-in-out alternate',
|
||||
'pulse-third': 'twinkle 3.5s infinite ease-in-out alternate',
|
||||
'draw-stroke': 'draw-stroke 5s ease-in forwards',
|
||||
'wait-and-appear': 'wait-and-appear 2s ease-out 1',
|
||||
'glide-right': 'glide-right 3s 1 ease-in-out',
|
||||
'appear-first': 'appear-first 3s ease-in-out ',
|
||||
'appear-second': 'appear-second 3s ease-in-out ',
|
||||
'appear-third': 'appear-third 3s ease-in-out ',
|
||||
'type-first-repeat': 'appear-first 5s ease-in-out infinite',
|
||||
'type-second-repeat': 'appear-second 5s ease-in-out infinite',
|
||||
'type-third-repeat': 'appear-third 5s ease-in-out infinite',
|
||||
'type-fourth-repeat': 'appear-fourth 5s ease-in-out infinite',
|
||||
'pulse-stroke': 'pulse-stroke 2s linear infinite',
|
||||
'wait-and-rotate': 'wait-and-rotate 5s infinite ease-out',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче