@wix/design-system-illustrations 2.43.0 → 2.44.1

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 (75) hide show
  1. package/dist/cjs/MaxWidth.js +1 -2
  2. package/dist/cjs/animated/ElementPositionDefault.js +90 -0
  3. package/dist/cjs/animated/ElementPositionPinned.js +91 -0
  4. package/dist/cjs/animated/ElementPositionSticky.js +91 -0
  5. package/dist/cjs/animated/ResponsiveBehaviorHeaderDisappear.js +90 -0
  6. package/dist/cjs/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +10 -9
  7. package/dist/cjs/animated/StickySectionPresetsGridRows.js +89 -0
  8. package/dist/cjs/animated/{ThumbnailGridTransparent.js → StickySectionPresetsSideBySide.js} +10 -9
  9. package/dist/cjs/animated/StickySectionPresetsSplit.js +89 -0
  10. package/dist/cjs/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +10 -9
  11. package/dist/cjs/animated/animated.global.css +696 -477
  12. package/dist/cjs/animated/index.js +27 -30
  13. package/dist/esm/MaxWidth.js +1 -2
  14. package/dist/esm/animated/ElementPositionDefault.js +46 -0
  15. package/dist/esm/animated/ElementPositionPinned.js +47 -0
  16. package/dist/esm/animated/ElementPositionSticky.js +47 -0
  17. package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js +46 -0
  18. package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +6 -5
  19. package/dist/esm/animated/StickySectionPresetsGridRows.js +45 -0
  20. package/dist/esm/animated/StickySectionPresetsSideBySide.js +45 -0
  21. package/dist/esm/animated/StickySectionPresetsSplit.js +45 -0
  22. package/dist/esm/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +6 -5
  23. package/dist/esm/animated/animated.global.css +696 -477
  24. package/dist/esm/animated/index.js +18 -20
  25. package/dist/types/animated/ElementPositionDefault.d.ts +7 -0
  26. package/dist/types/animated/ElementPositionPinned.d.ts +7 -0
  27. package/dist/types/animated/ElementPositionSticky.d.ts +7 -0
  28. package/dist/types/animated/ResponsiveBehaviorHeaderDisappear.d.ts +7 -0
  29. package/dist/types/animated/StickySectionPresetsFullWidth.d.ts +7 -0
  30. package/dist/types/animated/StickySectionPresetsGridRows.d.ts +7 -0
  31. package/dist/types/animated/StickySectionPresetsSideBySide.d.ts +7 -0
  32. package/dist/types/animated/StickySectionPresetsSplit.d.ts +7 -0
  33. package/dist/types/animated/StickySectionPresetsZigzag.d.ts +7 -0
  34. package/dist/types/animated/index.d.ts +18 -20
  35. package/package.json +3 -3
  36. package/src/MaxWidth.svg +1 -1
  37. package/src/animated/ElementPositionDefault.html +223 -0
  38. package/src/animated/ElementPositionPinned.html +223 -0
  39. package/src/animated/ElementPositionSticky.html +342 -0
  40. package/src/animated/ResponsiveBehaviorHeaderDisappear.html +336 -0
  41. package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} +81 -16
  42. package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} +100 -17
  43. package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} +82 -16
  44. package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} +99 -18
  45. package/src/animated/{ThumbnailZigzagTransparent.html → StickySectionPresetsZigzag.html} +92 -21
  46. package/dist/cjs/animated/ThumbnailFullWidth.js +0 -88
  47. package/dist/cjs/animated/ThumbnailGrid.js +0 -88
  48. package/dist/cjs/animated/ThumbnailSideBySide.js +0 -88
  49. package/dist/cjs/animated/ThumbnailSideBySideTransparent.js +0 -88
  50. package/dist/cjs/animated/ThumbnailSplit.js +0 -88
  51. package/dist/cjs/animated/ThumbnailSplitTransparent.js +0 -88
  52. package/dist/cjs/animated/ThumbnailZigzag.js +0 -88
  53. package/dist/esm/animated/ThumbnailFullWidth.js +0 -44
  54. package/dist/esm/animated/ThumbnailGrid.js +0 -44
  55. package/dist/esm/animated/ThumbnailGridTransparent.js +0 -44
  56. package/dist/esm/animated/ThumbnailSideBySide.js +0 -44
  57. package/dist/esm/animated/ThumbnailSideBySideTransparent.js +0 -44
  58. package/dist/esm/animated/ThumbnailSplit.js +0 -44
  59. package/dist/esm/animated/ThumbnailSplitTransparent.js +0 -44
  60. package/dist/esm/animated/ThumbnailZigzag.js +0 -44
  61. package/dist/types/animated/ThumbnailFullWidth.d.ts +0 -7
  62. package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +0 -7
  63. package/dist/types/animated/ThumbnailGrid.d.ts +0 -7
  64. package/dist/types/animated/ThumbnailGridTransparent.d.ts +0 -7
  65. package/dist/types/animated/ThumbnailSideBySide.d.ts +0 -7
  66. package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +0 -7
  67. package/dist/types/animated/ThumbnailSplit.d.ts +0 -7
  68. package/dist/types/animated/ThumbnailSplitTransparent.d.ts +0 -7
  69. package/dist/types/animated/ThumbnailZigzag.d.ts +0 -7
  70. package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +0 -7
  71. package/src/animated/ThumbnailFullWidth.html +0 -133
  72. package/src/animated/ThumbnailGrid.html +0 -134
  73. package/src/animated/ThumbnailSideBySide.html +0 -160
  74. package/src/animated/ThumbnailSplit.html +0 -139
  75. package/src/animated/ThumbnailZigzag.html +0 -162
package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} RENAMED
@@ -9,24 +9,46 @@ svg {
9
9
  height: auto;
10
10
  }
11
11
 
12
+ *, *::before, *::after { animation-delay: -1700ms !important; }
13
+
12
14
  :root {
13
15
  --color-1: #7896FF;
14
16
  --color-2: #002294;
15
17
  --color-3: #F8F6F6;
16
18
  }
17
19
 
20
+ .Thumbnail-Container-2 {
21
+ animation: Thumbnail-Container-2-opacity 2417ms linear infinite both;
22
+ }
23
+
24
+ @keyframes Thumbnail-Container-2-opacity {
25
+ 0% {
26
+ opacity: 1;
27
+ }
28
+ 1.737691% {
29
+ opacity: 1;
30
+ }
31
+ 1.738691% {
32
+ opacity: 0;
33
+ }
34
+ 100% {
35
+ opacity: 0;
36
+ }
37
+ }
38
+
18
39
  .group-mtr8nkm4-1 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: group-mtr8nkm4-1-transform 2375ms linear infinite both;
40
+ transform-origin: 33.99795px 24.154449px;
41
+ animation:
42
+ group-mtr8nkm4-1-transform 2417ms linear infinite both,
43
+ shared-opacity-1 2417ms linear infinite both;
22
44
  }
23
45
 
24
46
  @keyframes group-mtr8nkm4-1-transform {
25
47
  0% {
26
- transform: translate(0px, 30px);
48
+ transform: translate(0px, 39.094881px);
27
49
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
50
  }
29
- 26.315789% {
51
+ 27.596194% {
30
52
  transform: translate(0px, 0px);
31
53
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
54
  }
@@ -35,18 +57,34 @@ svg {
35
57
  }
36
58
  }
37
59
 
60
+ @keyframes shared-opacity-1 {
61
+ 0% {
62
+ opacity: 0;
63
+ }
64
+ 1.736691% {
65
+ opacity: 0;
66
+ }
67
+ 1.737691% {
68
+ opacity: 1;
69
+ }
70
+ 100% {
71
+ opacity: 1;
72
+ }
73
+ }
74
+
38
75
  .group-mtr8o0p7-2 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: group-mtr8o0p7-2-transform 2375ms linear infinite both;
76
+ transform-origin: 33.99795px 33.99815px;
77
+ animation:
78
+ group-mtr8o0p7-2-transform 2417ms linear infinite both,
79
+ shared-opacity-1 2417ms linear infinite both;
42
80
  }
43
81
 
44
82
  @keyframes group-mtr8o0p7-2-transform {
45
83
  0% {
46
- transform: translate(0px, 51.778772px);
84
+ transform: translate(0px, 53.865117px);
47
85
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
86
  }
49
- 33.347368% {
87
+ 34.505585% {
50
88
  transform: translate(0px, 0px);
51
89
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
90
  }
@@ -56,17 +94,18 @@ svg {
56
94
  }
57
95
 
58
96
  .group-mtr8obho-3 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: group-mtr8obho-3-transform 2375ms linear infinite both;
97
+ transform-origin: 55.071684px 42.848101px;
98
+ animation:
99
+ group-mtr8obho-3-transform 2417ms linear infinite both,
100
+ shared-opacity-1 2417ms linear infinite both;
62
101
  }
63
102
 
64
103
  @keyframes group-mtr8obho-3-transform {
65
104
  0% {
66
- transform: translate(0px, 57.591696px);
105
+ transform: translate(0px, 58.340508px);
67
106
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
107
  }
69
- 40.336842% {
108
+ 41.373604% {
70
109
  transform: translate(0px, 0px);
71
110
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
111
  }
@@ -127,7 +166,51 @@ svg {
127
166
  <g fill="none">
128
167
  <g fill="none" clip-path="url(#clip1_4424_19222)">
129
168
  <path d="M 33.2578 35.73953 L 33.2578 51.94417 A 2.83333 2.83333 45 0 1 30.42447 54.7775 L 16.05583 54.7775 A 2.83333 2.83333 45 0 1 13.2225 51.94417 L 13.2225 35.73953 A 2.83333 2.83333 45 0 1 16.05583 32.9062 L 30.42447 32.9062 A 2.83333 2.83333 45 0 1 33.2578 35.73953 Z" fill="var(--color-2)" />
130
- <g fill="none" filter="url(#filter1_f_4424_19222)">
169
+ <g fill="none">
170
+ <path d="M83.9297 62.2109L83.9297 23.4853L4.49536 23.4853L4.49536 62.2109L83.9297 62.2109Z" fill="url(#paint0_linear_4424_19222)" />
171
+ </g>
172
+ </g>
173
+ </g>
174
+ <g fill="none">
175
+ <g fill="none" clip-path="url(#clip2_4424_19222)">
176
+ <path d="M 54.7734 35.73953 L 54.7734 51.94417 A 2.83333 2.83333 45 0 1 51.94007 54.7775 L 37.57143 54.7775 A 2.83333 2.83333 45 0 1 34.7381 51.94417 L 34.7381 35.73953 A 2.83333 2.83333 45 0 1 37.57143 32.9062 L 51.94007 32.9062 A 2.83333 2.83333 45 0 1 54.7734 35.73953 Z" fill="var(--color-2)" />
177
+ <g fill="none">
178
+ <path d="M105.648 62.2109L105.648 23.4853L26.2141 23.4853L26.2141 62.2109L105.648 62.2109Z" fill="url(#paint1_linear_4424_19222)" />
179
+ </g>
180
+ </g>
181
+ </g>
182
+ </g>
183
+ </g>
184
+ </g>
185
+ </g>
186
+ </g>
187
+ <g class="Thumbnail-Container-2" fill="none">
188
+ <g fill="none">
189
+ <g fill="none" clip-path="url(#clip0_4424_19222)">
190
+ <path display="none" d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-3)" />
191
+ <g fill="none">
192
+ <rect display="none" x="0" y="0" width="68" height="68" rx="3.77778" fill="var(--color-3)" opacity="0.57" />
193
+ <g>
194
+ <g fill="none">
195
+ <path d="M 54.7734 16.05213 L 54.7734 32.25677 A 2.83333 2.83333 45 0 1 51.94007 35.0901 L 37.57143 35.0901 A 2.83333 2.83333 45 0 1 34.7381 32.25677 L 34.7381 16.05213 A 2.83333 2.83333 45 0 1 37.57143 13.2188 L 51.94007 13.2188 A 2.83333 2.83333 45 0 1 54.7734 16.05213 Z" fill="var(--color-2)" />
196
+ </g>
197
+ <g fill="none">
198
+ <path d="M 33.2578 16.05213 L 33.2578 32.25677 A 2.83333 2.83333 45 0 1 30.42447 35.0901 L 16.05583 35.0901 A 2.83333 2.83333 45 0 1 13.2225 32.25677 L 13.2225 16.05213 A 2.83333 2.83333 45 0 1 16.05583 13.2188 L 30.42447 13.2188 A 2.83333 2.83333 45 0 1 33.2578 16.05213 Z" fill="var(--color-2)" />
199
+ </g>
200
+ </g>
201
+ <g>
202
+ <g fill="none">
203
+ <path d="M 33.2578 25.89583 L 33.2578 42.10047 A 2.83333 2.83333 45 0 1 30.42447 44.9338 L 16.05583 44.9338 A 2.83333 2.83333 45 0 1 13.2225 42.10047 L 13.2225 25.89583 A 2.83333 2.83333 45 0 1 16.05583 23.0625 L 30.42447 23.0625 A 2.83333 2.83333 45 0 1 33.2578 25.89583 Z" fill="var(--color-1)" />
204
+ </g>
205
+ <g fill="none">
206
+ <path d="M 54.7734 25.89583 L 54.7734 42.10047 A 2.83333 2.83333 45 0 1 51.94007 44.9338 L 37.57143 44.9338 A 2.83333 2.83333 45 0 1 34.7381 42.10047 L 34.7381 25.89583 A 2.83333 2.83333 45 0 1 37.57143 23.0625 L 51.94007 23.0625 A 2.83333 2.83333 45 0 1 54.7734 25.89583 Z" fill="var(--color-1)" />
207
+ </g>
208
+ </g>
209
+ <g>
210
+ <g fill="none">
211
+ <g fill="none" clip-path="url(#clip1_4424_19222)">
212
+ <path d="M 33.2578 35.73953 L 33.2578 51.94417 A 2.83333 2.83333 45 0 1 30.42447 54.7775 L 16.05583 54.7775 A 2.83333 2.83333 45 0 1 13.2225 51.94417 L 13.2225 35.73953 A 2.83333 2.83333 45 0 1 16.05583 32.9062 L 30.42447 32.9062 A 2.83333 2.83333 45 0 1 33.2578 35.73953 Z" fill="var(--color-2)" />
213
+ <g fill="none">
131
214
  <path d="M83.9297 62.2109L83.9297 23.4853L4.49536 23.4853L4.49536 62.2109L83.9297 62.2109Z" fill="url(#paint0_linear_4424_19222)" />
132
215
  </g>
133
216
  </g>
@@ -135,7 +218,7 @@ svg {
135
218
  <g fill="none">
136
219
  <g fill="none" clip-path="url(#clip2_4424_19222)">
137
220
  <path d="M 54.7734 35.73953 L 54.7734 51.94417 A 2.83333 2.83333 45 0 1 51.94007 54.7775 L 37.57143 54.7775 A 2.83333 2.83333 45 0 1 34.7381 51.94417 L 34.7381 35.73953 A 2.83333 2.83333 45 0 1 37.57143 32.9062 L 51.94007 32.9062 A 2.83333 2.83333 45 0 1 54.7734 35.73953 Z" fill="var(--color-2)" />
138
- <g fill="none" filter="url(#filter2_f_4424_19222)">
221
+ <g fill="none">
139
222
  <path d="M105.648 62.2109L105.648 23.4853L26.2141 23.4853L26.2141 62.2109L105.648 62.2109Z" fill="url(#paint1_linear_4424_19222)" />
140
223
  </g>
141
224
  </g>
package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} RENAMED
@@ -9,6 +9,8 @@ svg {
9
9
  height: auto;
10
10
  }
11
11
 
12
+ *, *::before, *::after { animation-delay: -1700ms !important; }
13
+
12
14
  :root {
13
15
  --color-1: #F8F6F6;
14
16
  --color-2: #002294;
@@ -16,17 +18,18 @@ svg {
16
18
  }
17
19
 
18
20
  .Group-2147222318 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Group-2147222318-transform 2375ms linear infinite both;
21
+ transform-origin: 19.6262px 29.50695px;
22
+ animation:
23
+ Group-2147222318-transform 2417ms linear infinite both,
24
+ shared-opacity-1 2417ms linear infinite both;
22
25
  }
23
26
 
24
27
  @keyframes Group-2147222318-transform {
25
28
  0% {
26
- transform: translate(0px, 30px);
29
+ transform: translate(0px, 39.094881px);
27
30
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
31
  }
29
- 26.315789% {
32
+ 27.596194% {
30
33
  transform: translate(0px, 0px);
31
34
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
35
  }
@@ -35,18 +38,34 @@ svg {
35
38
  }
36
39
  }
37
40
 
41
+ @keyframes shared-opacity-1 {
42
+ 0% {
43
+ opacity: 0;
44
+ }
45
+ 1.736691% {
46
+ opacity: 0;
47
+ }
48
+ 1.737691% {
49
+ opacity: 1;
50
+ }
51
+ 100% {
52
+ opacity: 1;
53
+ }
54
+ }
55
+
38
56
  .Group-2147222319 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Group-2147222319-transform 2375ms linear infinite both;
57
+ transform-origin: 34.001201px 33.991349px;
58
+ animation:
59
+ Group-2147222319-transform 2417ms linear infinite both,
60
+ shared-opacity-1 2417ms linear infinite both;
42
61
  }
43
62
 
44
63
  @keyframes Group-2147222319-transform {
45
64
  0% {
46
- transform: translate(0px, 51.778772px);
65
+ transform: translate(0px, 53.865117px);
47
66
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
67
  }
49
- 33.347368% {
68
+ 34.505585% {
50
69
  transform: translate(0px, 0px);
51
70
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
71
  }
@@ -56,17 +75,18 @@ svg {
56
75
  }
57
76
 
58
77
  .Group-2147222320 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Group-2147222320-transform 2375ms linear infinite both;
78
+ transform-origin: 53.81885px 26.68909px;
79
+ animation:
80
+ Group-2147222320-transform 2417ms linear infinite both,
81
+ shared-opacity-1 2417ms linear infinite both;
62
82
  }
63
83
 
64
84
  @keyframes Group-2147222320-transform {
65
85
  0% {
66
- transform: translate(0px, 57.591696px);
86
+ transform: translate(0px, 58.340508px);
67
87
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
88
  }
69
- 40.336842% {
89
+ 41.373604% {
70
90
  transform: translate(0px, 0px);
71
91
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
92
  }
@@ -74,6 +94,25 @@ svg {
74
94
  transform: translate(0px, 0px);
75
95
  }
76
96
  }
97
+
98
+ .import-mtr80uod-2-2 {
99
+ animation: import-mtr80uod-2-2-opacity 2417ms linear infinite both;
100
+ }
101
+
102
+ @keyframes import-mtr80uod-2-2-opacity {
103
+ 0% {
104
+ opacity: 1;
105
+ }
106
+ 1.737691% {
107
+ opacity: 1;
108
+ }
109
+ 1.738691% {
110
+ opacity: 0;
111
+ }
112
+ 100% {
113
+ opacity: 0;
114
+ }
115
+ }
77
116
  </style>
78
117
  </head>
79
118
  <body>
@@ -109,7 +148,7 @@ svg {
109
148
  <g fill="none">
110
149
  <g fill="none" clip-path="url(#clip0_4424_19258)">
111
150
  <path d="M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z" fill="var(--color-2)" />
112
- <g fill="none" filter="url(#filter1_f_4424_19258)">
151
+ <g fill="none">
113
152
  <path d="M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z" fill="url(#paint0_linear_4424_19258)" />
114
153
  </g>
115
154
  </g>
@@ -119,6 +158,33 @@ svg {
119
158
  </g>
120
159
  </g>
121
160
  </g>
161
+ <g class="import-mtr80uod-2-2">
162
+ <g fill="none">
163
+ <rect display="none" x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" opacity="0.57" />
164
+ <g fill="none">
165
+ <g fill="none">
166
+ <g fill="none">
167
+ <path d="M 24.36891 19 L 14.88349 19 A 1.88889 1.88889 90 0 0 12.9946 20.88889 L 12.9946 38.12501 A 1.88889 1.88889 90 0 0 14.88349 40.0139 L 24.36891 40.0139 A 1.88889 1.88889 90 0 0 26.2578 38.12501 L 26.2578 20.88889 A 1.88889 1.88889 90 0 0 24.36891 19 Z" fill="var(--color-2)" />
168
+ </g>
169
+ </g>
170
+ <g fill="none">
171
+ <g fill="none">
172
+ <path d="M 38.74391 23.4844 L 29.25849 23.4844 A 1.88889 1.88889 90 0 0 27.3696 25.37329 L 27.3696 42.60941 A 1.88889 1.88889 90 0 0 29.25849 44.4983 L 38.74391 44.4983 A 1.88889 1.88889 90 0 0 40.6328 42.60941 L 40.6328 25.37329 A 1.88889 1.88889 90 0 0 38.74391 23.4844 Z" fill="var(--color-3)" />
173
+ </g>
174
+ </g>
175
+ <g fill="none">
176
+ <g fill="none">
177
+ <g fill="none" clip-path="url(#clip0_4424_19258)">
178
+ <path d="M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z" fill="var(--color-2)" />
179
+ <g fill="none">
180
+ <path d="M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z" fill="url(#paint0_linear_4424_19258)" />
181
+ </g>
182
+ </g>
183
+ </g>
184
+ </g>
185
+ </g>
186
+ </g>
187
+ </g>
122
188
  </svg>
123
189
  </body>
124
190
  </html>
package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} RENAMED
@@ -9,24 +9,28 @@ svg {
9
9
  height: auto;
10
10
  }
11
11
 
12
+ *, *::before, *::after { animation-delay: -1700ms !important; }
13
+
12
14
  :root {
13
15
  --color-1: #F8F6F6;
14
16
  --color-2: #002294;
15
17
  --color-3: #7896FF;
18
+ --illustration-color-opacity-25: rgba(248, 246, 246, 0);
16
19
  }
17
20
 
18
21
  .Frame-1707483277 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Frame-1707483277-transform 2375ms linear infinite both;
22
+ transform-origin: 65.235903px 42.92625px;
23
+ animation:
24
+ Frame-1707483277-transform 2417ms linear infinite both,
25
+ shared-opacity-1 2417ms linear infinite both;
22
26
  }
23
27
 
24
28
  @keyframes Frame-1707483277-transform {
25
29
  0% {
26
- transform: translate(0px, 57.377876px);
30
+ transform: translate(0px, 58.20055px);
27
31
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
32
  }
29
- 38.568421% {
33
+ 39.635912% {
30
34
  transform: translate(0px, 0px);
31
35
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
36
  }
@@ -35,18 +39,34 @@ svg {
35
39
  }
36
40
  }
37
41
 
42
+ @keyframes shared-opacity-1 {
43
+ 0% {
44
+ opacity: 0;
45
+ }
46
+ 1.736691% {
47
+ opacity: 0;
48
+ }
49
+ 1.737691% {
50
+ opacity: 1;
51
+ }
52
+ 100% {
53
+ opacity: 1;
54
+ }
55
+ }
56
+
38
57
  .Frame-1707483278 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Frame-1707483278-transform 2375ms linear infinite both;
58
+ transform-origin: 44.5px 34px;
59
+ animation:
60
+ Frame-1707483278-transform 2417ms linear infinite both,
61
+ shared-opacity-1 2417ms linear infinite both;
42
62
  }
43
63
 
44
64
  @keyframes Frame-1707483278-transform {
45
65
  0% {
46
- transform: translate(0px, 50.823251px);
66
+ transform: translate(0px, 53.207292px);
47
67
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
68
  }
49
- 31.578947% {
69
+ 32.767894% {
50
70
  transform: translate(0px, 0px);
51
71
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
72
  }
@@ -56,17 +76,18 @@ svg {
56
76
  }
57
77
 
58
78
  .Frame-1707483281 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Frame-1707483281-transform 2375ms linear infinite both;
79
+ transform-origin: 44.5px 24px;
80
+ animation:
81
+ Frame-1707483281-transform 2417ms linear infinite both,
82
+ shared-opacity-1 2417ms linear infinite both;
62
83
  }
63
84
 
64
85
  @keyframes Frame-1707483281-transform {
65
86
  0% {
66
- transform: translate(0px, 24.979506px);
87
+ transform: translate(0px, 35.105832px);
67
88
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
89
  }
69
- 24.561403% {
90
+ 25.872293% {
70
91
  transform: translate(0px, 0px);
71
92
  animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
93
  }
@@ -74,6 +95,29 @@ svg {
74
95
  transform: translate(0px, 0px);
75
96
  }
76
97
  }
98
+
99
+ .split07 {
100
+ animation: shared-opacity-1 2417ms linear infinite both;
101
+ }
102
+
103
+ .split07-2 {
104
+ animation: split07-2-opacity 2417ms linear infinite both;
105
+ }
106
+
107
+ @keyframes split07-2-opacity {
108
+ 0% {
109
+ opacity: 1;
110
+ }
111
+ 1.737691% {
112
+ opacity: 1;
113
+ }
114
+ 1.738691% {
115
+ opacity: 0;
116
+ }
117
+ 100% {
118
+ opacity: 0;
119
+ }
120
+ }
77
121
  </style>
78
122
  </head>
79
123
  <body>
@@ -91,13 +135,17 @@ svg {
91
135
  <mask id="am-node-1-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
92
136
  <mask id="am-node-1-2-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
93
137
  <mask id="am-node-1-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
138
+ <mask id="am-node-1-2-2-3" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
139
+ <mask id="am-node-1-2-2-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
140
+ <mask id="am-node-1-2-3" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
94
141
  </defs>
95
- <g fill="none">
142
+ <g class="split07" fill="none">
96
143
  <rect display="none" x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" opacity="0.57" />
97
144
  <g fill="none">
145
+ <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--illustration-color-opacity-25)" />
98
146
  <g fill="none" opacity="0.25">
99
147
  <g fill="none">
100
- <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--color-2)" />
148
+ <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--color-3)" />
101
149
  </g>
102
150
  </g>
103
151
  <g fill="none">
@@ -115,7 +163,40 @@ svg {
115
163
  <g class="Frame-1707483277" fill="none">
116
164
  <g fill="none" clip-path="url(#clip0_4428_19363)">
117
165
  <path d="M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z" fill="var(--color-2)" />
118
- <g fill="none" filter="url(#filter1_f_4428_19363)">
166
+ <g fill="none">
167
+ <path d="M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z" fill="url(#paint0_linear_4428_19363)" />
168
+ </g>
169
+ </g>
170
+ </g>
171
+ </g>
172
+ </g>
173
+ </g>
174
+ </g>
175
+ <g class="split07-2" fill="none">
176
+ <rect display="none" x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" opacity="0.57" />
177
+ <g fill="none">
178
+ <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--illustration-color-opacity-25)" />
179
+ <g fill="none" opacity="0.25">
180
+ <g fill="none">
181
+ <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--color-3)" />
182
+ </g>
183
+ </g>
184
+ <g fill="none">
185
+ <g mask="url(#am-node-1-2-2-3)">
186
+ <g fill="none">
187
+ <path style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0px, 0px)" d="M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z" fill="var(--color-2)" />
188
+ </g>
189
+ </g>
190
+ <g mask="url(#am-node-1-2-2-2-2)">
191
+ <g fill="none">
192
+ <path d="M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z" fill="var(--color-3)" />
193
+ </g>
194
+ </g>
195
+ <g mask="url(#am-node-1-2-3)">
196
+ <g fill="none">
197
+ <g fill="none" clip-path="url(#clip0_4428_19363)">
198
+ <path d="M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z" fill="var(--color-2)" />
199
+ <g fill="none">
119
200
  <path d="M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z" fill="url(#paint0_linear_4428_19363)" />
120
201
  </g>
121
202
  </g>