@wix/design-system-illustrations 2.26.0 → 2.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/cjs/BookingsImagePosition01.js +54 -0
  2. package/dist/cjs/BookingsImagePosition02.js +54 -0
  3. package/dist/cjs/BookingsImagePosition03.js +54 -0
  4. package/dist/cjs/BookingsImagePosition04.js +54 -0
  5. package/dist/cjs/BookingsImagePosition05.js +54 -0
  6. package/dist/cjs/BookingsImagePosition06.js +54 -0
  7. package/dist/cjs/BookingsImagePosition07.js +54 -0
  8. package/dist/cjs/BookingsImagePosition08.js +54 -0
  9. package/dist/cjs/BookingsImagePosition09.js +54 -0
  10. package/dist/cjs/CreateAComponent.js +54 -0
  11. package/dist/cjs/CreateAContext.js +54 -0
  12. package/dist/cjs/CreateAFunction.js +52 -0
  13. package/dist/cjs/ImageSizeL.js +52 -0
  14. package/dist/cjs/ImageSizeM.js +52 -0
  15. package/dist/cjs/ImageSizeS.js +52 -0
  16. package/dist/cjs/animated/ElementsFixedHeight.js +87 -0
  17. package/dist/cjs/animated/ElementsFixedMargins.js +87 -0
  18. package/dist/cjs/animated/ElementsScale.js +87 -0
  19. package/dist/cjs/animated/SectionFixedHeight.js +88 -0
  20. package/dist/cjs/animated/SectionScale.js +87 -0
  21. package/dist/cjs/animated/animated.css +857 -16
  22. package/dist/cjs/animated/index.js +15 -3
  23. package/dist/cjs/index.js +45 -0
  24. package/dist/esm/BookingsImagePosition01.js +20 -0
  25. package/dist/esm/BookingsImagePosition02.js +20 -0
  26. package/dist/esm/BookingsImagePosition03.js +20 -0
  27. package/dist/esm/BookingsImagePosition04.js +20 -0
  28. package/dist/esm/BookingsImagePosition05.js +20 -0
  29. package/dist/esm/BookingsImagePosition06.js +20 -0
  30. package/dist/esm/BookingsImagePosition07.js +20 -0
  31. package/dist/esm/BookingsImagePosition08.js +20 -0
  32. package/dist/esm/BookingsImagePosition09.js +20 -0
  33. package/dist/esm/CreateAComponent.js +20 -0
  34. package/dist/esm/CreateAContext.js +20 -0
  35. package/dist/esm/CreateAFunction.js +18 -0
  36. package/dist/esm/ImageSizeL.js +18 -0
  37. package/dist/esm/ImageSizeM.js +18 -0
  38. package/dist/esm/ImageSizeS.js +18 -0
  39. package/dist/esm/animated/ElementsFixedHeight.js +43 -0
  40. package/dist/esm/animated/ElementsFixedMargins.js +43 -0
  41. package/dist/esm/animated/ElementsScale.js +43 -0
  42. package/dist/esm/animated/SectionFixedHeight.js +44 -0
  43. package/dist/esm/animated/SectionScale.js +43 -0
  44. package/dist/esm/animated/animated.css +857 -16
  45. package/dist/esm/animated/index.js +10 -2
  46. package/dist/esm/index.js +30 -0
  47. package/dist/types/BookingsImagePosition01.d.ts +5 -0
  48. package/dist/types/BookingsImagePosition02.d.ts +5 -0
  49. package/dist/types/BookingsImagePosition03.d.ts +5 -0
  50. package/dist/types/BookingsImagePosition04.d.ts +5 -0
  51. package/dist/types/BookingsImagePosition05.d.ts +5 -0
  52. package/dist/types/BookingsImagePosition06.d.ts +5 -0
  53. package/dist/types/BookingsImagePosition07.d.ts +5 -0
  54. package/dist/types/BookingsImagePosition08.d.ts +5 -0
  55. package/dist/types/BookingsImagePosition09.d.ts +5 -0
  56. package/dist/types/CreateAComponent.d.ts +5 -0
  57. package/dist/types/CreateAContext.d.ts +5 -0
  58. package/dist/types/CreateAFunction.d.ts +5 -0
  59. package/dist/types/ImageSizeL.d.ts +5 -0
  60. package/dist/types/ImageSizeM.d.ts +5 -0
  61. package/dist/types/ImageSizeS.d.ts +5 -0
  62. package/dist/types/animated/ElementsFixedHeight.d.ts +7 -0
  63. package/dist/types/animated/ElementsFixedMargins.d.ts +7 -0
  64. package/dist/types/animated/ElementsScale.d.ts +7 -0
  65. package/dist/types/animated/SectionFixedHeight.d.ts +7 -0
  66. package/dist/types/animated/SectionScale.d.ts +7 -0
  67. package/dist/types/animated/index.d.ts +10 -2
  68. package/dist/types/index.d.ts +15 -0
  69. package/package.json +3 -3
  70. package/src/BookingsImagePosition01.svg +28 -0
  71. package/src/BookingsImagePosition02.svg +28 -0
  72. package/src/BookingsImagePosition03.svg +28 -0
  73. package/src/BookingsImagePosition04.svg +28 -0
  74. package/src/BookingsImagePosition05.svg +28 -0
  75. package/src/BookingsImagePosition06.svg +28 -0
  76. package/src/BookingsImagePosition07.svg +28 -0
  77. package/src/BookingsImagePosition08.svg +28 -0
  78. package/src/BookingsImagePosition09.svg +28 -0
  79. package/src/CreateAComponent.svg +23 -0
  80. package/src/CreateAContext.svg +43 -0
  81. package/src/CreateAFunction.svg +29 -0
  82. package/src/ImageSizeL.svg +10 -0
  83. package/src/ImageSizeM.svg +10 -0
  84. package/src/ImageSizeS.svg +10 -0
  85. package/src/animated/ElementsFixedHeight.html +261 -0
  86. package/src/animated/ElementsFixedMargins.html +225 -0
  87. package/src/animated/SectionFixedHeight.html +283 -0
  88. package/src/animated/SectionScale.html +381 -0
  89. package/dist/cjs/animated/ThumbnailScale.js +0 -87
  90. package/dist/esm/animated/ThumbnailScale.js +0 -43
  91. package/dist/types/animated/ThumbnailScale.d.ts +0 -7
  92. /package/src/animated/{ThumbnailScale.html → ElementsScale.html} +0 -0
@@ -0,0 +1,283 @@
1
+ <html lang="en">
2
+ <head>
3
+ <style>
4
+ svg {
5
+ max-width: 100%;
6
+ height: auto;
7
+ }
8
+
9
+ .node-11 {
10
+ transform-box: fill-box;
11
+ transform-origin: 50% 50%;
12
+ animation: node-11-transform 3375ms linear infinite both;
13
+ }
14
+
15
+ @keyframes node-11-transform {
16
+ 0% {
17
+ transform: translate(0px, 0px);
18
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
19
+ }
20
+ 49.392593% {
21
+ transform: translate(38px, 0px);
22
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
23
+ }
24
+ 98.755556% {
25
+ transform: translate(0px, 0px);
26
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
27
+ }
28
+ 100% {
29
+ transform: translate(0px, 0px);
30
+ }
31
+ }
32
+
33
+ .node-3-2 {
34
+ transform-box: fill-box;
35
+ transform-origin: 50% 50%;
36
+ animation:
37
+ node-3-2-transform 3375ms linear infinite both,
38
+ node-3-2-width 3375ms linear infinite both;
39
+ }
40
+
41
+ @keyframes node-3-2-transform {
42
+ 0% {
43
+ transform: translate(-37px, 0px);
44
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
45
+ }
46
+ 49.392593% {
47
+ transform: translate(0px, 0px);
48
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
49
+ }
50
+ 98.755556% {
51
+ transform: translate(-37px, 0px);
52
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
53
+ }
54
+ 100% {
55
+ transform: translate(-37px, 0px);
56
+ }
57
+ }
58
+
59
+ @keyframes node-3-2-width {
60
+ 0% {
61
+ width: 147px;
62
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
63
+ }
64
+ 49.392593% {
65
+ width: 73px;
66
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
67
+ }
68
+ 98.755556% {
69
+ width: 147px;
70
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
71
+ }
72
+ 100% {
73
+ width: 147px;
74
+ }
75
+ }
76
+
77
+ .node-4 {
78
+ transform-box: fill-box;
79
+ transform-origin: 50% 50%;
80
+ animation: node-4-transform 3375ms linear infinite both;
81
+ }
82
+
83
+ @keyframes node-4-transform {
84
+ 0% {
85
+ transform: translate(0px, 0px);
86
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
87
+ }
88
+ 49.392593% {
89
+ transform: translate(37px, 0px);
90
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
91
+ }
92
+ 98.755556% {
93
+ transform: translate(0px, 0px);
94
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
95
+ }
96
+ 100% {
97
+ transform: translate(0px, 0px);
98
+ }
99
+ }
100
+
101
+ .node-5 {
102
+ transform-box: fill-box;
103
+ transform-origin: 50% 50%;
104
+ animation: node-5-transform 3375ms linear infinite both;
105
+ }
106
+
107
+ @keyframes node-5-transform {
108
+ 0% {
109
+ transform: translate(0px, 0px);
110
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
111
+ }
112
+ 49.392593% {
113
+ transform: translate(-37px, 0px);
114
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
115
+ }
116
+ 98.755556% {
117
+ transform: translate(0px, 0px);
118
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
119
+ }
120
+ 100% {
121
+ transform: translate(0px, 0px);
122
+ }
123
+ }
124
+
125
+ .node-8 {
126
+ transform-box: fill-box;
127
+ transform-origin: 50% 50%;
128
+ animation: node-8-transform 3375ms linear infinite both;
129
+ }
130
+
131
+ @keyframes node-8-transform {
132
+ 0% {
133
+ transform: translate(0px, 0px);
134
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
135
+ }
136
+ 98.755556% {
137
+ transform: translate(0px, 0px);
138
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
139
+ }
140
+ 100% {
141
+ transform: translate(0px, 0px);
142
+ }
143
+ }
144
+ .crop-node-7-3 {
145
+ animation: crop-node-7-3-clip 3375ms linear infinite both;
146
+ }
147
+
148
+ @keyframes crop-node-7-3-clip {
149
+ 0% {
150
+ clip-path: inset(33.498px 44.3135px 33.4976px 44.6865px round 4px) view-box;
151
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
152
+ }
153
+ 49.392593% {
154
+ clip-path: inset(33.498px 81.3135px 33.4976px 81.6865px round 4px) view-box;
155
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
156
+ }
157
+ 98.755556% {
158
+ clip-path: inset(33.498px 44.3135px 33.4976px 44.6865px round 4px) view-box;
159
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
160
+ }
161
+ 100% {
162
+ clip-path: inset(33.498px 44.3135px 33.4976px 44.6865px round 4px) view-box;
163
+ }
164
+ }
165
+ </style>
166
+ </head>
167
+ <body>
168
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
169
+ <defs>
170
+ <linearGradient id="paint0_linear_1118_5963" x1="69.8122" y1="25.6667" x2="-91.7874" y2="84.3309" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#D5DFFF" /><stop offset="0.85" stop-color="#B8C4FF" /></linearGradient>
171
+ <linearGradient id="paint0_linear_1118_5980" x1="72.6142" y1="9.26832" x2="-18.2597" y2="104.292" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#D5DFFF" /><stop offset="0.85" stop-color="#B8C4FF" /></linearGradient>
172
+ <linearGradient id="paint1_linear_1118_5963" x1="180.625" y1="18.6735" x2="134.776" y2="99.5385" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
173
+ <linearGradient id="paint1_linear_1118_5980" x1="180.417" y1="18.5925" x2="134.568" y2="99.4575" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
174
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_1118_5980" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
175
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
176
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
177
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
178
+ <feOffset dx="1" dy="1"/>
179
+ <feGaussianBlur stdDeviation="1.5"/>
180
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
181
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
182
+ <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1118_5980"/>
183
+ </filter>
184
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_1118_5980" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
185
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
186
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
187
+ <feGaussianBlur stdDeviation="11.6304" result="effect1_foregroundBlur_1118_5980"/>
188
+ </filter>
189
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_1118_5980" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
190
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
191
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
192
+ <feGaussianBlur stdDeviation="3.72612" result="effect1_foregroundBlur_1118_5980"/>
193
+ </filter>
194
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_1118_5980">
195
+ <rect x="81.4805" y="33.498" width="73" height="60.0044" rx="4" fill="white"/>
196
+ </clipPath>
197
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_1118_5980">
198
+ <rect x="108.477" y="66.6545" width="19" height="7" rx="3.5" fill="white"/>
199
+ </clipPath>
200
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
201
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
202
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
203
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
204
+ <feOffset dx="1" dy="1"/>
205
+ <feGaussianBlur stdDeviation="1.5"/>
206
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
207
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
208
+ <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1118_5963"/>
209
+ </filter>
210
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
211
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
212
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
213
+ <feGaussianBlur stdDeviation="8.40795" result="effect1_foregroundBlur_1118_5963"/>
214
+ </filter>
215
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
216
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
217
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
218
+ <feGaussianBlur stdDeviation="3.72612" result="effect1_foregroundBlur_1118_5963"/>
219
+ </filter>
220
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_1118_5963">
221
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="4" fill="white"/>
222
+ </clipPath>
223
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_1118_5963">
224
+ <rect x="108.685" y="66.7356" width="19" height="7" rx="3.5" fill="white"/>
225
+ </clipPath>
226
+ </defs>
227
+ <g>
228
+ <g fill="none" filter="url(#filter0_i_1118_5963)">
229
+ <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="#303030" />
230
+ <rect class="node-3-2" x="81.6865" y="23" width="73" height="81" rx="6" fill="#F8F6F6" fill-opacity="0.25" />
231
+ <path class="node-4" d="M42 67.5V59.5C42 58.9477 41.5523 58.5 41 58.5C40.4477 58.5 40 58.9477 40 59.5V67.5C40 68.0523 40.4477 68.5 41 68.5C41.5523 68.5 42 68.0523 42 67.5Z" fill="#B8C4FF" />
232
+ <path class="node-5" d="M196 67.5V59.5C196 58.9477 195.552 58.5 195 58.5C194.448 58.5 194 58.9477 194 59.5V67.5C194 68.0523 194.448 68.5 195 68.5C195.552 68.5 196 68.0523 196 67.5Z" fill="#B8C4FF" />
233
+ <g class="crop-node-7-3">
234
+ <rect x="0" y="0" width="236" height="127" fill="none" />
235
+ <g>
236
+ <g display="none" fill="none" opacity="0.5">
237
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="6" fill="#F8F6F6" />
238
+ </g>
239
+ <g class="node-8" fill="none" clip-path="url(#clip0_1118_5963)">
240
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="4" fill="#002294" />
241
+ <g fill="none" filter="url(#filter1_f_1118_5963)">
242
+ <path class="node-11" d="M 330.543 93.502 L 330.543004 12.1524 L 44.594004 12.152388 L 44.594 93.501988 Z" fill="url(#paint0_linear_1118_5963)" />
243
+ </g>
244
+ </g>
245
+ <g>
246
+ <rect x="93.3218" y="53.2649" width="49.7295" height="1.66238" rx="0.831192" fill="#002294" />
247
+ <rect x="104.623" y="59.0569" width="27.1252" height="1.66238" rx="0.831192" fill="#002294" />
248
+ <g fill="none" clip-path="url(#clip1_1118_5963)">
249
+ <rect x="108.685" y="66.7356" width="19" height="7" rx="3.5" fill="#002294" />
250
+ <g fill="none" filter="url(#filter2_f_1118_5963)">
251
+ <path d="M108.685 13.2295H192.515V73.8807H108.685V13.2295Z" fill="url(#paint1_linear_1118_5963)" />
252
+ </g>
253
+ </g>
254
+ </g>
255
+ </g>
256
+ </g>
257
+ </g>
258
+ </g>
259
+ <g display="none" opacity="0.5">
260
+ <g fill="none" filter="url(#filter0_i_1118_5980)">
261
+ <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="#303030" />
262
+ <rect x="81.4805" y="23.5" width="73" height="80" rx="6" fill="#F8F6F6" fill-opacity="0.25" />
263
+ <g fill="none" clip-path="url(#clip0_1118_5980)">
264
+ <rect x="81.4805" y="33.498" width="73" height="60.0044" rx="4" fill="#002294" />
265
+ <g fill="none" filter="url(#filter1_f_1118_5980)">
266
+ <path d="M 184.384 93.502 L 184.384004 8.8873 L 81.127004 8.887295 L 81.127 93.501995 Z" fill="url(#paint0_linear_1118_5980)" />
267
+ </g>
268
+ </g>
269
+ <rect x="93.1138" y="53.3459" width="49.7295" height="1.5" rx="0.75" fill="#002294" />
270
+ <rect x="104.415" y="58.8528" width="27.1252" height="1.5" rx="0.75" fill="#002294" />
271
+ <g fill="none" clip-path="url(#clip1_1118_5980)">
272
+ <rect x="108.477" y="66.6545" width="19" height="7" rx="3.5" fill="#002294" />
273
+ <g fill="none" filter="url(#filter2_f_1118_5980)">
274
+ <path d="M108.477 13.1484H192.307V73.7996H108.477V13.1484Z" fill="url(#paint1_linear_1118_5980)" />
275
+ </g>
276
+ </g>
277
+ <path d="M79 67.5V59.5C79 58.9477 78.5523 58.5 78 58.5C77.4477 58.5 77 58.9477 77 59.5V67.5C77 68.0523 77.4477 68.5 78 68.5C78.5523 68.5 79 68.0523 79 67.5Z" fill="#B8C4FF" />
278
+ <path d="M159 67.5V59.5C159 58.9477 158.552 58.5 158 58.5C157.448 58.5 157 58.9477 157 59.5V67.5C157 68.0523 157.448 68.5 158 68.5C158.552 68.5 159 68.0523 159 67.5Z" fill="#B8C4FF" />
279
+ </g>
280
+ </g>
281
+ </svg>
282
+ </body>
283
+ </html>
@@ -0,0 +1,381 @@
1
+ <html lang="en">
2
+ <head>
3
+ <style>
4
+ svg {
5
+ max-width: 100%;
6
+ height: auto;
7
+ }
8
+
9
+ .node-11 {
10
+ transform-box: fill-box;
11
+ transform-origin: 50% 50%;
12
+ animation: node-11-transform 3375ms linear infinite both;
13
+ }
14
+
15
+ @keyframes node-11-transform {
16
+ 0% {
17
+ transform: translate(0px, 0px);
18
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
19
+ }
20
+ 49.392593% {
21
+ transform: translate(38px, 0px);
22
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
23
+ }
24
+ 98.755556% {
25
+ transform: translate(0px, 0px);
26
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
27
+ }
28
+ 100% {
29
+ transform: translate(0px, 0px);
30
+ }
31
+ }
32
+
33
+ .node-12 {
34
+ transform-box: fill-box;
35
+ transform-origin: 50% 50%;
36
+ animation:
37
+ node-12-transform 3375ms linear infinite both,
38
+ node-12-width 3375ms linear infinite both,
39
+ node-12-height 3375ms linear infinite both;
40
+ }
41
+
42
+ @keyframes node-12-transform {
43
+ 0% {
44
+ transform: translate(-8.36475px, 0px);
45
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
46
+ }
47
+ 49.392593% {
48
+ transform: translate(0px, -12px);
49
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
50
+ }
51
+ 98.755556% {
52
+ transform: translate(-8.36475px, 0px);
53
+ }
54
+ 100% {
55
+ transform: translate(-8.36475px, 0px);
56
+ }
57
+ }
58
+
59
+ @keyframes node-12-width {
60
+ 0% {
61
+ width: 49.7295px;
62
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
63
+ }
64
+ 49.392593% {
65
+ width: 33px;
66
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
67
+ }
68
+ 98.755556% {
69
+ width: 49.7295px;
70
+ }
71
+ 100% {
72
+ width: 49.7295px;
73
+ }
74
+ }
75
+
76
+ @keyframes node-12-height {
77
+ 0% {
78
+ height: 1.5px;
79
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
80
+ }
81
+ 49.392593% {
82
+ height: 1.5px;
83
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
84
+ }
85
+ 98.755556% {
86
+ height: 1.5px;
87
+ }
88
+ 100% {
89
+ height: 1.5px;
90
+ }
91
+ }
92
+
93
+ .node-13 {
94
+ transform-box: fill-box;
95
+ transform-origin: 50% 50%;
96
+ animation:
97
+ node-13-transform 3375ms linear infinite both,
98
+ node-13-width 3375ms linear infinite both,
99
+ node-13-height 3375ms linear infinite both;
100
+ }
101
+
102
+ @keyframes node-13-transform {
103
+ 0% {
104
+ transform: translate(-4.5626px, 0px);
105
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
106
+ }
107
+ 49.392593% {
108
+ transform: translate(0px, -13px);
109
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
110
+ }
111
+ 98.755556% {
112
+ transform: translate(-4.5626px, 0px);
113
+ }
114
+ 100% {
115
+ transform: translate(-4.5626px, 0px);
116
+ }
117
+ }
118
+
119
+ @keyframes node-13-width {
120
+ 0% {
121
+ width: 27.1252px;
122
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
123
+ }
124
+ 49.392593% {
125
+ width: 18px;
126
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
127
+ }
128
+ 98.755556% {
129
+ width: 27.1252px;
130
+ }
131
+ 100% {
132
+ width: 27.1252px;
133
+ }
134
+ }
135
+
136
+ @keyframes node-13-height {
137
+ 0% {
138
+ height: 1.5px;
139
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
140
+ }
141
+ 49.392593% {
142
+ height: 1.5px;
143
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
144
+ }
145
+ 98.755556% {
146
+ height: 1.5px;
147
+ }
148
+ 100% {
149
+ height: 1.5px;
150
+ }
151
+ }
152
+
153
+ .node-14 {
154
+ transform-box: fill-box;
155
+ transform-origin: 50% 50%;
156
+ animation: node-14-transform 3375ms linear infinite both;
157
+ }
158
+
159
+ @keyframes node-14-transform {
160
+ 0% {
161
+ transform: translate(0px, 0px) scale(1, 1);
162
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
163
+ }
164
+ 49.392593% {
165
+ transform: translate(0px, -10px) scale(0.72, 0.72);
166
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
167
+ }
168
+ 98.755556% {
169
+ transform: translate(0px, 0px) scale(1, 1);
170
+ }
171
+ 100% {
172
+ transform: translate(0px, 0px) scale(1, 1);
173
+ }
174
+ }
175
+
176
+ .node-3-2 {
177
+ transform-box: fill-box;
178
+ transform-origin: 50% 50%;
179
+ animation:
180
+ node-3-2-transform 3375ms linear infinite both,
181
+ node-3-2-width 3375ms linear infinite both;
182
+ }
183
+
184
+ @keyframes node-3-2-transform {
185
+ 0% {
186
+ transform: translate(-37px, 0px);
187
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
188
+ }
189
+ 49.392593% {
190
+ transform: translate(0px, 0px);
191
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
192
+ }
193
+ 98.755556% {
194
+ transform: translate(-37px, 0px);
195
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
196
+ }
197
+ 100% {
198
+ transform: translate(-37px, 0px);
199
+ }
200
+ }
201
+
202
+ @keyframes node-3-2-width {
203
+ 0% {
204
+ width: 147px;
205
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
206
+ }
207
+ 49.392593% {
208
+ width: 73px;
209
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
210
+ }
211
+ 98.755556% {
212
+ width: 147px;
213
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
214
+ }
215
+ 100% {
216
+ width: 147px;
217
+ }
218
+ }
219
+
220
+ .node-4 {
221
+ transform-box: fill-box;
222
+ transform-origin: 50% 50%;
223
+ animation: node-4-transform 3375ms linear infinite both;
224
+ }
225
+
226
+ @keyframes node-4-transform {
227
+ 0% {
228
+ transform: translate(0px, 0px);
229
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
230
+ }
231
+ 49.392593% {
232
+ transform: translate(37px, 0px);
233
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
234
+ }
235
+ 98.755556% {
236
+ transform: translate(0px, 0px);
237
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
238
+ }
239
+ 100% {
240
+ transform: translate(0px, 0px);
241
+ }
242
+ }
243
+
244
+ .node-5 {
245
+ transform-box: fill-box;
246
+ transform-origin: 50% 50%;
247
+ animation: node-5-transform 3375ms linear infinite both;
248
+ }
249
+
250
+ @keyframes node-5-transform {
251
+ 0% {
252
+ transform: translate(0px, 0px);
253
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
254
+ }
255
+ 49.392593% {
256
+ transform: translate(-37px, 0px);
257
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
258
+ }
259
+ 98.755556% {
260
+ transform: translate(0px, 0px);
261
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
262
+ }
263
+ 100% {
264
+ transform: translate(0px, 0px);
265
+ }
266
+ }
267
+
268
+ .node-8 {
269
+ transform-box: fill-box;
270
+ transform-origin: 50% 50%;
271
+ animation: node-8-transform 3375ms linear infinite both;
272
+ }
273
+
274
+ @keyframes node-8-transform {
275
+ 0% {
276
+ transform: translate(0px, 0px);
277
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
278
+ }
279
+ 49.392593% {
280
+ transform: translate(0px, -28px);
281
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
282
+ }
283
+ 98.755556% {
284
+ transform: translate(0px, 0px);
285
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
286
+ }
287
+ 100% {
288
+ transform: translate(0px, 0px);
289
+ }
290
+ }
291
+
292
+ .crop-mrxanv9k-m {
293
+ animation: crop-mrxanv9k-m-clip 3375ms linear infinite both;
294
+ }
295
+
296
+ @keyframes crop-mrxanv9k-m-clip {
297
+ 0% {
298
+ clip-path: inset(33.5px 44.5px 33.5px 44.5px round 4px) view-box;
299
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
300
+ }
301
+ 49.392593% {
302
+ clip-path: inset(33.5px 81.5px 63.5px 81.5px round 4px) view-box;
303
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
304
+ }
305
+ 98.755556% {
306
+ clip-path: inset(33.5px 44.5px 33.5px 44.5px round 4px) view-box;
307
+ }
308
+ 100% {
309
+ clip-path: inset(33.5px 44.5px 33.5px 44.5px round 4px) view-box;
310
+ }
311
+ }
312
+ </style>
313
+ </head>
314
+ <body>
315
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
316
+ <defs>
317
+ <linearGradient id="paint0_linear_1118_5963" x1="69.8122" y1="25.6667" x2="-91.7874" y2="84.3309" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#D5DFFF" /><stop offset="0.85" stop-color="#B8C4FF" /></linearGradient>
318
+ <linearGradient id="paint1_linear_1118_5963" x1="180.625" y1="18.6735" x2="134.776" y2="99.5385" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
319
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
320
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
321
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
322
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
323
+ <feOffset dx="1" dy="1"/>
324
+ <feGaussianBlur stdDeviation="1.5"/>
325
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
326
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
327
+ <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1118_5963"/>
328
+ </filter>
329
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
330
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
331
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
332
+ <feGaussianBlur stdDeviation="8.40795" result="effect1_foregroundBlur_1118_5963"/>
333
+ </filter>
334
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_1118_5963" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
335
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
336
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
337
+ <feGaussianBlur stdDeviation="3.72612" result="effect1_foregroundBlur_1118_5963"/>
338
+ </filter>
339
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_1118_5963">
340
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="4" fill="white"/>
341
+ </clipPath>
342
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_1118_5963">
343
+ <rect x="108.685" y="66.7356" width="19" height="7" rx="3.5" fill="white"/>
344
+ </clipPath>
345
+ </defs>
346
+ <g>
347
+ <g fill="none" filter="url(#filter0_i_1118_5963)">
348
+ <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="#303030" />
349
+ <rect class="node-3-2" x="81.6865" y="23" width="73" height="81" rx="6" fill="#F8F6F6" fill-opacity="0.25" />
350
+ <path class="node-4" d="M42 67.5V59.5C42 58.9477 41.5523 58.5 41 58.5C40.4477 58.5 40 58.9477 40 59.5V67.5C40 68.0523 40.4477 68.5 41 68.5C41.5523 68.5 42 68.0523 42 67.5Z" fill="#B8C4FF" />
351
+ <path class="node-5" d="M196 67.5V59.5C196 58.9477 195.552 58.5 195 58.5C194.448 58.5 194 58.9477 194 59.5V67.5C194 68.0523 194.448 68.5 195 68.5C195.552 68.5 196 68.0523 196 67.5Z" fill="#B8C4FF" />
352
+ <g class="crop-mrxanv9k-m">
353
+ <rect x="0" y="0" width="236" height="127" fill="none" />
354
+ <g>
355
+ <g display="none" fill="none" opacity="0.5">
356
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="6" fill="#F8F6F6" />
357
+ </g>
358
+ <g class="node-8" fill="none" clip-path="url(#clip0_1118_5963)">
359
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="4" fill="#002294" />
360
+ <g fill="none" filter="url(#filter1_f_1118_5963)">
361
+ <path class="node-11" d="M 330.543 93.502 L 330.543004 12.1524 L 44.594004 12.152388 L 44.594 93.501988 Z" fill="url(#paint0_linear_1118_5963)" />
362
+ </g>
363
+ </g>
364
+ <g>
365
+ <rect class="node-12" x="101.68655" y="53.2649" width="33" height="1.66238" rx="0.831192" fill="#002294" />
366
+ <rect class="node-13" x="109.1856" y="59.0569" width="18" height="1.66238" rx="0.831192" fill="#002294" />
367
+ <g class="node-14" fill="none" clip-path="url(#clip1_1118_5963)">
368
+ <rect x="108.685" y="66.7356" width="19" height="7" rx="3.5" fill="#002294" />
369
+ <g fill="none" filter="url(#filter2_f_1118_5963)">
370
+ <path d="M108.685 13.2295H192.515V73.8807H108.685V13.2295Z" fill="url(#paint1_linear_1118_5963)" />
371
+ </g>
372
+ <rect x="44.6865" y="33.498" width="147" height="60.0044" rx="6" fill="#F8F6F6" opacity="0" />
373
+ </g>
374
+ </g>
375
+ </g>
376
+ </g>
377
+ </g>
378
+ </g>
379
+ </svg>
380
+ </body>
381
+ </html>