@wix/design-system-illustrations 2.15.0 → 2.17.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 (38) hide show
  1. package/animated/package.json +5 -0
  2. package/animated/style.css +1 -0
  3. package/dist/cjs/CloseupSection.js +62 -0
  4. package/dist/cjs/ColorClick.js +52 -0
  5. package/dist/cjs/ColorHover.js +54 -0
  6. package/dist/cjs/LayeredElipseDivider.js +4 -3
  7. package/dist/cjs/PeaksDivider.js +52 -0
  8. package/dist/cjs/ShuttersAnimation.js +52 -0
  9. package/dist/cjs/animated/ThumbnailScale.js +87 -0
  10. package/dist/cjs/animated/animated.css +122 -0
  11. package/dist/cjs/animated/index.js +28 -0
  12. package/dist/cjs/index.js +15 -0
  13. package/dist/esm/CloseupSection.js +28 -0
  14. package/dist/esm/ColorClick.js +18 -0
  15. package/dist/esm/ColorHover.js +20 -0
  16. package/dist/esm/LayeredElipseDivider.js +4 -3
  17. package/dist/esm/PeaksDivider.js +18 -0
  18. package/dist/esm/ShuttersAnimation.js +18 -0
  19. package/dist/esm/animated/ThumbnailScale.js +43 -0
  20. package/dist/esm/animated/animated.css +122 -0
  21. package/dist/esm/animated/index.js +4 -0
  22. package/dist/esm/index.js +10 -0
  23. package/dist/types/CloseupSection.d.ts +5 -0
  24. package/dist/types/ColorClick.d.ts +5 -0
  25. package/dist/types/ColorHover.d.ts +5 -0
  26. package/dist/types/PeaksDivider.d.ts +5 -0
  27. package/dist/types/ShuttersAnimation.d.ts +5 -0
  28. package/dist/types/animated/ThumbnailScale.d.ts +7 -0
  29. package/dist/types/animated/index.d.ts +2 -0
  30. package/dist/types/index.d.ts +5 -0
  31. package/package.json +8 -4
  32. package/src/CloseupSection.svg +87 -0
  33. package/src/ColorClick.svg +59 -0
  34. package/src/ColorHover.svg +54 -0
  35. package/src/LayeredElipseDivider.svg +3 -3
  36. package/src/PeaksDivider.svg +28 -0
  37. package/src/ShuttersAnimation.svg +57 -0
  38. package/src/animated/ThumbnailScale.html +494 -0
@@ -0,0 +1,494 @@
1
+ <html lang="en">
2
+ <head>
3
+ <style>
4
+ svg {
5
+ max-width: 100%;
6
+ height: auto;
7
+ }
8
+
9
+ .Frame-2147240028 {
10
+ transform-box: fill-box;
11
+ transform-origin: 50% 50%;
12
+ animation: Frame-2147240028-transform 3417ms linear infinite both;
13
+ }
14
+
15
+ @keyframes Frame-2147240028-transform {
16
+ 0% {
17
+ transform: scale(0.56, 0.56);
18
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
19
+ }
20
+ 2.429031% {
21
+ transform: scale(0.56, 0.56);
22
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
23
+ }
24
+ 51.214516% {
25
+ transform: scale(1, 1);
26
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
27
+ }
28
+ 99.970735% {
29
+ transform: scale(0.56, 0.56);
30
+ }
31
+ 100% {
32
+ transform: scale(0.56, 0.56);
33
+ }
34
+ }
35
+
36
+ .Vector_4 {
37
+ transform-box: fill-box;
38
+ transform-origin: 50% 50%;
39
+ animation: Vector_4-transform 3417ms linear infinite both;
40
+ }
41
+
42
+ @keyframes Vector_4-transform {
43
+ 0% {
44
+ transform: translate(37px, 0px);
45
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
46
+ }
47
+ 48.785484% {
48
+ transform: translate(0px, 0px);
49
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
50
+ }
51
+ 97.541703% {
52
+ transform: translate(37px, 0px);
53
+ }
54
+ 100% {
55
+ transform: translate(37px, 0px);
56
+ }
57
+ }
58
+
59
+ .Vector_5 {
60
+ transform-box: fill-box;
61
+ transform-origin: 50% 50%;
62
+ animation: Vector_5-transform 3417ms linear infinite both;
63
+ }
64
+
65
+ @keyframes Vector_5-transform {
66
+ 0% {
67
+ transform: translate(-37px, 0px);
68
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
69
+ }
70
+ 48.785484% {
71
+ transform: translate(0px, 0px);
72
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
73
+ }
74
+ 97.541703% {
75
+ transform: translate(-37px, 0px);
76
+ }
77
+ 100% {
78
+ transform: translate(-37px, 0px);
79
+ }
80
+ }
81
+
82
+ .node-3 {
83
+ transform-box: fill-box;
84
+ transform-origin: 50% 50%;
85
+ animation:
86
+ node-3-transform 3417ms linear infinite both,
87
+ node-3-width 3417ms linear infinite both;
88
+ }
89
+
90
+ @keyframes node-3-transform {
91
+ 0% {
92
+ transform: translate(0px, 0px);
93
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
94
+ }
95
+ 48.785484% {
96
+ transform: translate(-37px, 0px);
97
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
98
+ }
99
+ 97.541703% {
100
+ transform: translate(0px, 0px);
101
+ }
102
+ 100% {
103
+ transform: translate(0px, 0px);
104
+ }
105
+ }
106
+
107
+ @keyframes node-3-width {
108
+ 0% {
109
+ width: 73px;
110
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
111
+ }
112
+ 48.785484% {
113
+ width: 147px;
114
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
115
+ }
116
+ 97.541703% {
117
+ width: 73px;
118
+ }
119
+ 100% {
120
+ width: 73px;
121
+ }
122
+ }
123
+ </style>
124
+ </head>
125
+ <body>
126
+ <svg
127
+ xmlns="http://www.w3.org/2000/svg"
128
+ width="236"
129
+ height="127"
130
+ viewBox="0 0 236 127"
131
+ fill="none"
132
+ >
133
+ <defs>
134
+ <linearGradient
135
+ id="paint0_linear_4125_12361"
136
+ x1="110.482"
137
+ y1="60.3398"
138
+ x2="133.552"
139
+ y2="78.8708"
140
+ gradientUnits="userSpaceOnUse"
141
+ >
142
+ <stop offset="0" stop-color="#EAEFFF" />
143
+ <stop offset="0.325264" stop-color="#B8C4FF" />
144
+ <stop offset="1" stop-color="#002294" />
145
+ </linearGradient>
146
+ <linearGradient
147
+ id="paint0_linear_4125_12403"
148
+ x1="113.562"
149
+ y1="61.7065"
150
+ x2="126.645"
151
+ y2="72.2151"
152
+ gradientUnits="userSpaceOnUse"
153
+ >
154
+ <stop offset="0" stop-color="#EAEFFF" />
155
+ <stop offset="0.325264" stop-color="#B8C4FF" />
156
+ <stop offset="1" stop-color="#002294" />
157
+ </linearGradient>
158
+ <linearGradient
159
+ id="paint1_linear_4125_12361"
160
+ x1="95.2177"
161
+ y1="37.3346"
162
+ x2="140.84"
163
+ y2="82.5369"
164
+ gradientUnits="userSpaceOnUse"
165
+ >
166
+ <stop offset="0" stop-color="#EAEFFF" />
167
+ <stop offset="0.5" stop-color="#B8C4FF" />
168
+ <stop offset="0.95" stop-color="#002294" />
169
+ </linearGradient>
170
+ <linearGradient
171
+ id="paint1_linear_4125_12403"
172
+ x1="104.902"
173
+ y1="48.661"
174
+ x2="130.774"
175
+ y2="74.2946"
176
+ gradientUnits="userSpaceOnUse"
177
+ >
178
+ <stop offset="0" stop-color="#EAEFFF" />
179
+ <stop offset="0.5" stop-color="#B8C4FF" />
180
+ <stop offset="0.95" stop-color="#002294" />
181
+ </linearGradient>
182
+ <linearGradient
183
+ id="paint2_linear_4125_12361"
184
+ x1="113.012"
185
+ y1="41.6462"
186
+ x2="94.9412"
187
+ y2="64.7056"
188
+ gradientUnits="userSpaceOnUse"
189
+ >
190
+ <stop offset="0.176006" stop-color="#EAEFFF" />
191
+ <stop offset="0.576923" stop-color="#B8C4FF" />
192
+ <stop offset="0.85" stop-color="#002294" />
193
+ </linearGradient>
194
+ <linearGradient
195
+ id="paint2_linear_4125_12403"
196
+ x1="114.992"
197
+ y1="51.1105"
198
+ x2="104.744"
199
+ y2="64.1871"
200
+ gradientUnits="userSpaceOnUse"
201
+ >
202
+ <stop offset="0.176006" stop-color="#EAEFFF" />
203
+ <stop offset="0.576923" stop-color="#B8C4FF" />
204
+ <stop offset="0.85" stop-color="#002294" />
205
+ </linearGradient>
206
+ <filter
207
+ xmlns="http://www.w3.org/2000/svg"
208
+ id="filter0_i_4125_12361"
209
+ color-interpolation-filters="sRGB"
210
+ filterUnits="objectBoundingBox"
211
+ x="-1"
212
+ y="-1"
213
+ width="3"
214
+ height="3"
215
+ >
216
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
217
+ <feBlend
218
+ mode="normal"
219
+ in="SourceGraphic"
220
+ in2="BackgroundImageFix"
221
+ result="shape"
222
+ />
223
+ <feColorMatrix
224
+ in="SourceAlpha"
225
+ type="matrix"
226
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
227
+ result="hardAlpha"
228
+ />
229
+ <feOffset dx="1" dy="1" />
230
+ <feGaussianBlur stdDeviation="1.5" />
231
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
232
+ <feColorMatrix
233
+ type="matrix"
234
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
235
+ />
236
+ <feBlend
237
+ mode="normal"
238
+ in2="shape"
239
+ result="effect1_innerShadow_4125_12361"
240
+ />
241
+ </filter>
242
+ <filter
243
+ xmlns="http://www.w3.org/2000/svg"
244
+ id="filter1_f_4125_12361"
245
+ color-interpolation-filters="sRGB"
246
+ filterUnits="objectBoundingBox"
247
+ x="-1"
248
+ y="-1"
249
+ width="3"
250
+ height="3"
251
+ >
252
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
253
+ <feBlend
254
+ mode="normal"
255
+ in="SourceGraphic"
256
+ in2="BackgroundImageFix"
257
+ result="shape"
258
+ />
259
+ <feGaussianBlur
260
+ stdDeviation="1.01565"
261
+ result="effect1_foregroundBlur_4125_12361"
262
+ />
263
+ </filter>
264
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4125_12361">
265
+ <rect x="44.5" y="23" width="147" height="81" rx="6" fill="white" />
266
+ </clipPath>
267
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4125_12361">
268
+ <rect
269
+ x="44.8125"
270
+ y="23"
271
+ width="147"
272
+ height="81"
273
+ rx="6"
274
+ fill="white"
275
+ />
276
+ </clipPath>
277
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4125_12361">
278
+ <rect
279
+ x="89.6719"
280
+ y="42.668"
281
+ width="57.2851"
282
+ height="41.6619"
283
+ rx="3.9058"
284
+ fill="white"
285
+ />
286
+ </clipPath>
287
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_4125_12361">
288
+ <rect
289
+ x="89.6719"
290
+ y="42.668"
291
+ width="57.2851"
292
+ height="42.5019"
293
+ rx="3.69581"
294
+ fill="white"
295
+ />
296
+ </clipPath>
297
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip4_4125_12361">
298
+ <rect
299
+ x="94.8828"
300
+ y="47.875"
301
+ width="11.7174"
302
+ height="11.7174"
303
+ rx="5.8587"
304
+ fill="white"
305
+ />
306
+ </clipPath>
307
+ <filter
308
+ xmlns="http://www.w3.org/2000/svg"
309
+ id="filter0_i_4125_12403"
310
+ color-interpolation-filters="sRGB"
311
+ filterUnits="objectBoundingBox"
312
+ x="-1"
313
+ y="-1"
314
+ width="3"
315
+ height="3"
316
+ >
317
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
318
+ <feBlend
319
+ mode="normal"
320
+ in="SourceGraphic"
321
+ in2="BackgroundImageFix"
322
+ result="shape"
323
+ />
324
+ <feColorMatrix
325
+ in="SourceAlpha"
326
+ type="matrix"
327
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
328
+ result="hardAlpha"
329
+ />
330
+ <feOffset dx="1" dy="1" />
331
+ <feGaussianBlur stdDeviation="1.5" />
332
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
333
+ <feColorMatrix
334
+ type="matrix"
335
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
336
+ />
337
+ <feBlend
338
+ mode="normal"
339
+ in2="shape"
340
+ result="effect1_innerShadow_4125_12403"
341
+ />
342
+ </filter>
343
+ <filter
344
+ xmlns="http://www.w3.org/2000/svg"
345
+ id="filter1_f_4125_12403"
346
+ color-interpolation-filters="sRGB"
347
+ filterUnits="objectBoundingBox"
348
+ x="-1"
349
+ y="-1"
350
+ width="3"
351
+ height="3"
352
+ >
353
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
354
+ <feBlend
355
+ mode="normal"
356
+ in="SourceGraphic"
357
+ in2="BackgroundImageFix"
358
+ result="shape"
359
+ />
360
+ <feGaussianBlur
361
+ stdDeviation="0.575959"
362
+ result="effect1_foregroundBlur_4125_12403"
363
+ />
364
+ </filter>
365
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4125_12403">
366
+ <rect
367
+ x="101.758"
368
+ y="51.6875"
369
+ width="32.4856"
370
+ height="23.6259"
371
+ rx="2.21493"
372
+ fill="white"
373
+ />
374
+ </clipPath>
375
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4125_12403">
376
+ <rect
377
+ x="101.758"
378
+ y="51.6875"
379
+ width="32.4856"
380
+ height="24.1022"
381
+ rx="2.09584"
382
+ fill="white"
383
+ />
384
+ </clipPath>
385
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4125_12403">
386
+ <rect
387
+ x="104.711"
388
+ y="54.6406"
389
+ width="6.64478"
390
+ height="6.64478"
391
+ rx="3.32239"
392
+ fill="white"
393
+ />
394
+ </clipPath>
395
+ </defs>
396
+ <g fill="none" filter="url(#filter0_i_4125_12361)">
397
+ <path
398
+ 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"
399
+ fill="#303030"
400
+ />
401
+ <g fill="none">
402
+ <g fill="none">
403
+ <g fill="none" clip-path="url(#clip0_4125_12361)">
404
+ <rect
405
+ class="node-3"
406
+ x="81.5"
407
+ y="23"
408
+ width="73"
409
+ height="81"
410
+ rx="6"
411
+ fill="#f8f6f6"
412
+ fill-opacity="0.25"
413
+ />
414
+ <g class="Frame-2147240028" fill="none">
415
+ <g fill="none" />
416
+ <g fill="none">
417
+ <g fill="none">
418
+ <g fill="none">
419
+ <g fill="none" clip-path="url(#clip1_4125_12361)">
420
+ <g fill="none">
421
+ <g fill="none">
422
+ <g fill="none">
423
+ <g fill="none" clip-path="url(#clip2_4125_12361)">
424
+ <g fill="none">
425
+ <g
426
+ fill="none"
427
+ clip-path="url(#clip3_4125_12361)"
428
+ >
429
+ <rect
430
+ x="89.6719"
431
+ y="42.668"
432
+ width="57.2851"
433
+ height="42.5019"
434
+ rx="3.69581"
435
+ fill="#eaefff"
436
+ />
437
+ </g>
438
+ </g>
439
+ <g fill="none">
440
+ <g fill="none">
441
+ <path
442
+ d="M119.091 51.7305L103.07 77.0863L131.643 72.9157L119.091 51.7305Z"
443
+ fill="url(#paint0_linear_4125_12361)"
444
+ />
445
+ <path
446
+ d="M147.883 60.7829C147.883 60.7829 125.917 51.9748 124.845 51.5285C123.774 51.0823 117.127 49.0176 119.092 54.9706C121.045 60.8862 122.115 63.1612 122.541 64.1714C122.966 65.1815 124.699 69.2975 120.34 70.8162C115.398 72.5369 88.75 80.7082 88.75 80.7082V85.401H147.883V60.7829Z"
447
+ fill="url(#paint1_linear_4125_12361)"
448
+ />
449
+ </g>
450
+ <g fill="none">
451
+ <g
452
+ fill="none"
453
+ clip-path="url(#clip4_4125_12361)"
454
+ >
455
+ <rect
456
+ x="94.8828"
457
+ y="47.875"
458
+ width="11.7174"
459
+ height="11.7174"
460
+ rx="5.8587"
461
+ fill="#002294"
462
+ />
463
+ <g
464
+ fill="none"
465
+ filter="url(#filter1_f_4125_12361)"
466
+ >
467
+ <path
468
+ d="M103.526 39.9477C102.962 40.0598 102.405 40.2153 101.863 40.4142C99.6365 41.2387 97.6628 42.8081 96.3614 45.0176C93.3864 50.0622 95.042 56.5243 100.059 59.4498C105.077 62.3753 111.555 60.6539 114.53 55.6094C117.505 50.5612 115.849 44.0991 110.835 41.1772C108.543 39.8392 105.952 39.474 103.526 39.9477Z"
469
+ fill="url(#paint2_linear_4125_12361)"
470
+ />
471
+ </g>
472
+ </g>
473
+ </g>
474
+ </g>
475
+ </g>
476
+ </g>
477
+ </g>
478
+ </g>
479
+ </g>
480
+ </g>
481
+ </g>
482
+ </g>
483
+ </g>
484
+ </g>
485
+ </g>
486
+ <g fill="none">
487
+ <path class="Vector_4" d="M42 59H40V69H42V59Z" fill="#b8c4ff" />
488
+ <path class="Vector_5" d="M196 59H194V69H196V59Z" fill="#b8c4ff" />
489
+ </g>
490
+ </g>
491
+ </g>
492
+ </svg>
493
+ </body>
494
+ </html>