@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/ElementPositionPinned.html ADDED
@@ -0,0 +1,223 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Animation</title>
6
+ <style>
7
+ svg {
8
+ max-width: 100%;
9
+ height: auto;
10
+ }
11
+
12
+ :root {
13
+ --color-1: #002294;
14
+ --color-2: #B8C4FF;
15
+ --color-3: #D9D9D9;
16
+ --color-4: #ffffff;
17
+ --color-5: #F8F6F6;
18
+ --color-6: #EAEFFF;
19
+ }
20
+
21
+ .import-mvny2ub3-b {
22
+ transform-origin: 120.230499px 123.178547px;
23
+ animation: import-mvny2ub3-b-transform 3360ms linear infinite both;
24
+ }
25
+
26
+ @keyframes import-mvny2ub3-b-transform {
27
+ 0% {
28
+ transform: translate(45px, 23px);
29
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
30
+ }
31
+ 49.603175% {
32
+ transform: translate(45px, -107px);
33
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
34
+ }
35
+ 99.206349% {
36
+ transform: translate(45px, 23px);
37
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
38
+ }
39
+ 100% {
40
+ transform: translate(45px, 23px);
41
+ }
42
+ }
43
+
44
+ .node-2 {
45
+ transform-origin: 2px 12.970789px;
46
+ animation: node-2-transform 3360ms linear infinite both;
47
+ }
48
+
49
+ @keyframes node-2-transform {
50
+ 0% {
51
+ transform: translate(0px, 0px);
52
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
53
+ }
54
+ 49.603175% {
55
+ transform: translate(0px, 32px);
56
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
57
+ }
58
+ 99.206349% {
59
+ transform: translate(0px, 0px);
60
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
61
+ }
62
+ 100% {
63
+ transform: translate(0px, 0px);
64
+ }
65
+ }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127">
70
+ <defs>
71
+ <linearGradient id="paint0_linear_4747_31154-4" x1="198.675" y1="-77.3474" x2="51.7215" y2="309.676" gradientUnits="userSpaceOnUse"><stop offset="0.04" stop-color="#FCFBF8" /><stop offset="0.91" stop-color="#B8C4FF" /></linearGradient>
72
+ <linearGradient id="paint1_linear_4747_31154-4" x1="54.5422" y1="179.544" x2="76.5043" y2="199.053" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
73
+ <linearGradient id="paint2_linear_4747_31154-4" x1="38.7391" y1="158.009" x2="81.2707" y2="204.612" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
74
+ <linearGradient id="paint3_linear_4747_31154-4" x1="54.7931" y1="162.363" x2="38.1544" y2="183.595" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
75
+ <linearGradient id="paint4_linear_4747_31154-4" x1="76.168" y1="28.0035" x2="-100.144" y2="92.0086" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#D5DFFF" /><stop offset="0.85" stop-color="#B8C4FF" /></linearGradient>
76
+ <linearGradient id="paint5_linear_4747_31154-4" x1="110.992" y1="-9.01811" x2="-30.1361" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
77
+ <linearGradient id="paint6_linear_4747_31154-4" x1="174.992" y1="-9.01811" x2="33.8639" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
78
+ <linearGradient id="paint7_linear_4747_31154-4" x1="238.992" y1="-9.01811" x2="97.8639" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
79
+ <linearGradient id="paint8_linear_4747_31154-4" x1="156.276" y1="21.2354" x2="115.992" y2="95.6105" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
80
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
81
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
82
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
83
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4747_31154"/>
84
+ </filter>
85
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
86
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
87
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
88
+ <feGaussianBlur stdDeviation="0.935156" result="effect1_foregroundBlur_4747_31154"/>
89
+ </filter>
90
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
91
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
92
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
93
+ <feGaussianBlur stdDeviation="9.17343" result="effect1_foregroundBlur_4747_31154"/>
94
+ </filter>
95
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter3_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
96
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
97
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
98
+ <feGaussianBlur stdDeviation="2.53814" result="effect1_foregroundBlur_4747_31154"/>
99
+ </filter>
100
+ <clipPath id="cb-node-1-3" clipPathUnits="userSpaceOnUse"><rect x="0" y="0" width="145" height="211" rx="6.89063"/></clipPath>
101
+ <clipPath id="cb-node-5-2" clipPathUnits="userSpaceOnUse"><rect x="33" y="163" width="44" height="39" rx="3.40292"/></clipPath>
102
+ <clipPath id="cb-node-6-2" clipPathUnits="userSpaceOnUse"><rect x="25.7822" y="163" width="57.7423" height="38.7956" rx="3.40292"/></clipPath>
103
+ <clipPath id="cb-node-8-2" clipPathUnits="userSpaceOnUse"><rect x="38.1011" y="168.102" width="11.7771" height="11.8626" rx="5.88855"/></clipPath>
104
+ <clipPath id="cb-node-13-2" clipPathUnits="userSpaceOnUse"><rect x="0" y="-5" width="150" height="80" rx="6"/></clipPath>
105
+ <clipPath id="cb-node-16-2" clipPathUnits="userSpaceOnUse"><rect x="-21" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
106
+ <clipPath id="cb-node-18-2" clipPathUnits="userSpaceOnUse"><rect x="42.6929" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
107
+ <clipPath id="cb-node-20-2" clipPathUnits="userSpaceOnUse"><rect x="106.386" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
108
+ <mask id="am-node-1-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><g id="am-node-1-2-artwork"><rect x="45.5" y="23" width="145" height="81" rx="6" fill="var(--color-3)" /></g></mask>
109
+ <mask id="am-node-11-clip-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z" fill="var(--color-4)" /></mask>
110
+ <mask id="am-node-22-clip-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-4)" /></mask>
111
+ </defs>
112
+ <use href="#am-node-1-2-artwork" />
113
+ <g mask="url(#am-node-1-2)">
114
+ <g class="import-mvny2ub3-b">
115
+ <g fill="none">
116
+ <g fill="none">
117
+ <g fill="none" clip-path="url(#cb-node-1-3)">
118
+ <g fill="none">
119
+ <rect x="-0.219727" y="0.101562" width="147" height="211.591" rx="6.89063" fill="var(--color-5)" />
120
+ </g>
121
+ <g fill="none" filter="url(#filter0_f_4747_31154)">
122
+ <rect x="-18.5842" y="-12.8047" width="203.967" height="283.943" fill="url(#paint0_linear_4747_31154-4)" />
123
+ </g>
124
+ <g fill="none">
125
+ <path d="M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z" fill="var(--color-2)" />
126
+ <g fill="none">
127
+ <g fill="none">
128
+ <g fill="none" clip-path="url(#cb-node-5-2)">
129
+ <g fill="none">
130
+ <g fill="none" clip-path="url(#cb-node-6-2)">
131
+ <rect x="25.7822" y="163" width="57.7423" height="38.7956" rx="3.40292" fill="var(--color-6)" />
132
+ </g>
133
+ </g>
134
+ <path d="M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z" fill="url(#paint1_linear_4747_31154-4)" />
135
+ <path d="M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z" fill="url(#paint2_linear_4747_31154-4)" />
136
+ <g fill="none">
137
+ <g fill="none" clip-path="url(#cb-node-8-2)">
138
+ <rect x="38.1011" y="168.102" width="11.7771" height="11.8626" rx="5.88855" fill="var(--color-1)" />
139
+ <g fill="none" filter="url(#filter1_f_4747_31154)">
140
+ <path d="M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z" fill="url(#paint3_linear_4747_31154-4)" />
141
+ </g>
142
+ </g>
143
+ </g>
144
+ </g>
145
+ </g>
146
+ <g fill="none">
147
+ <rect x="87" y="177" width="24" height="2" rx="1" fill="var(--color-1)" />
148
+ <rect x="87" y="186" width="13" height="2" rx="1" fill="var(--color-1)" />
149
+ </g>
150
+ </g>
151
+ </g>
152
+ <g fill="none">
153
+ <g mask="url(#am-node-11-clip-2)">
154
+ <g fill="none">
155
+ <path d="M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z" fill="var(--color-1)" />
156
+ <g fill="none">
157
+ <g fill="none" clip-path="url(#cb-node-13-2)">
158
+ <rect x="0" y="-5" width="150" height="80" rx="6" fill="var(--color-1)" />
159
+ <g fill="none" filter="url(#filter2_f_4747_31154)">
160
+ <path d="M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z" fill="url(#paint4_linear_4747_31154-4)" />
161
+ </g>
162
+ </g>
163
+ </g>
164
+ </g>
165
+ </g>
166
+ </g>
167
+ <g fill="none">
168
+ <g fill="none">
169
+ <rect x="30.4717" y="23.2734" width="84.0566" height="2" rx="1" fill="var(--color-1)" />
170
+ <rect x="49.5732" y="32.2734" width="45.8491" height="2" rx="1" fill="var(--color-1)" />
171
+ </g>
172
+ </g>
173
+ <g fill="none">
174
+ <g fill="none">
175
+ <g fill="none">
176
+ <g fill="none" clip-path="url(#cb-node-16-2)">
177
+ <rect x="-21" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
178
+ <rect x="-71.522" y="-24.7812" width="212.677" height="175.615" fill="url(#paint5_linear_4747_31154-4)" />
179
+ </g>
180
+ </g>
181
+ </g>
182
+ <g fill="none">
183
+ <g fill="none">
184
+ <g fill="none" clip-path="url(#cb-node-18-2)">
185
+ <rect x="42.6929" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
186
+ <rect x="-7.52197" y="-24.7812" width="212.677" height="175.615" fill="url(#paint6_linear_4747_31154-4)" />
187
+ </g>
188
+ </g>
189
+ </g>
190
+ <g fill="none">
191
+ <g fill="none">
192
+ <g fill="none" clip-path="url(#cb-node-20-2)">
193
+ <rect x="106.386" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
194
+ <rect x="56.478" y="-24.7812" width="212.677" height="175.615" fill="url(#paint7_linear_4747_31154-4)" />
195
+ </g>
196
+ </g>
197
+ </g>
198
+ </g>
199
+ </g>
200
+ </g>
201
+ </g>
202
+ </g>
203
+ </g>
204
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(104px, 40px)" fill="none">
205
+ <g mask="url(#am-node-22-clip-2)">
206
+ <g fill="none">
207
+ <path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-1)" />
208
+ <g fill="none" filter="url(#filter3_f_4747_31154)">
209
+ <path d="M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z" fill="url(#paint8_linear_4747_31154-4)" />
210
+ </g>
211
+ <path d="M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z" fill="var(--color-2)" />
212
+ </g>
213
+ </g>
214
+ </g>
215
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(194px, 33px)">
216
+ <path d="M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z" fill="var(--color-2)" />
217
+ <g class="node-2">
218
+ <path d="M2 8.48438L2 17.4572" fill="none" stroke="var(--color-1)" stroke-width="4" stroke-linecap="round" />
219
+ </g>
220
+ </g>
221
+ </svg>
222
+ </body>
223
+ </html>
package/src/animated/ElementPositionSticky.html ADDED
@@ -0,0 +1,342 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Animation</title>
6
+ <style>
7
+ svg {
8
+ max-width: 100%;
9
+ height: auto;
10
+ }
11
+
12
+ :root {
13
+ --color-1: #002294;
14
+ --color-2: #B8C4FF;
15
+ --color-3: #D9D9D9;
16
+ --color-4: #ffffff;
17
+ --color-5: #F8F6F6;
18
+ --color-6: #EAEFFF;
19
+ }
20
+
21
+ .Icon-Container-2 {
22
+ transform-origin: 114.923px 36.560651px;
23
+ animation:
24
+ Icon-Container-2-transform 3360ms linear infinite both,
25
+ Icon-Container-2-opacity 3360ms linear infinite both;
26
+ }
27
+
28
+ @keyframes Icon-Container-2-transform {
29
+ 0% {
30
+ transform: translate(46px, -5px);
31
+ animation-timing-function: steps(1, jump-end);
32
+ }
33
+ 19.84127% {
34
+ transform: translate(46px, -7px);
35
+ animation-timing-function: steps(1, jump-end);
36
+ }
37
+ 100% {
38
+ transform: translate(46px, -7px);
39
+ }
40
+ }
41
+
42
+ @keyframes Icon-Container-2-opacity {
43
+ 0% {
44
+ opacity: 1;
45
+ }
46
+ 19.85119% {
47
+ opacity: 1;
48
+ }
49
+ 19.85219% {
50
+ opacity: 0;
51
+ }
52
+ 100% {
53
+ opacity: 0;
54
+ }
55
+ }
56
+
57
+ .Icon-Container-2-2 {
58
+ transform-origin: 114.923px 36.560651px;
59
+ animation:
60
+ Icon-Container-2-2-transform 3360ms linear infinite both,
61
+ Icon-Container-2-2-opacity 3360ms linear infinite both;
62
+ }
63
+
64
+ @keyframes Icon-Container-2-2-transform {
65
+ 0% {
66
+ transform: translate(1px, 10.027px);
67
+ }
68
+ 19.84127% {
69
+ transform: translate(1px, 10.027px);
70
+ }
71
+ 100% {
72
+ transform: translate(1px, 10.027px);
73
+ }
74
+ }
75
+
76
+ @keyframes Icon-Container-2-2-opacity {
77
+ 0% {
78
+ opacity: 0;
79
+ }
80
+ 19.85019% {
81
+ opacity: 0;
82
+ }
83
+ 19.85119% {
84
+ opacity: 1;
85
+ }
86
+ 73.154762% {
87
+ opacity: 1;
88
+ }
89
+ 73.155762% {
90
+ opacity: 0;
91
+ }
92
+ 100% {
93
+ opacity: 0;
94
+ }
95
+ }
96
+
97
+ .Icon-Container-2-3 {
98
+ animation: Icon-Container-2-3-opacity 3360ms linear infinite both;
99
+ }
100
+
101
+ @keyframes Icon-Container-2-3-opacity {
102
+ 0% {
103
+ opacity: 0;
104
+ }
105
+ 73.153762% {
106
+ opacity: 0;
107
+ }
108
+ 73.154762% {
109
+ opacity: 1;
110
+ }
111
+ 100% {
112
+ opacity: 1;
113
+ }
114
+ }
115
+
116
+ .import-mvny2ub3-b {
117
+ transform-origin: 120.230499px 123.178547px;
118
+ animation: import-mvny2ub3-b-transform 3360ms linear infinite both;
119
+ }
120
+
121
+ @keyframes import-mvny2ub3-b-transform {
122
+ 0% {
123
+ transform: translate(45px, 23px);
124
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
125
+ }
126
+ 49.603175% {
127
+ transform: translate(45px, -107px);
128
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
129
+ }
130
+ 99.206349% {
131
+ transform: translate(45px, 23px);
132
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
133
+ }
134
+ 100% {
135
+ transform: translate(45px, 23px);
136
+ }
137
+ }
138
+
139
+ .node-2 {
140
+ transform-origin: 2px 12.970789px;
141
+ animation: node-2-transform 3360ms linear infinite both;
142
+ }
143
+
144
+ @keyframes node-2-transform {
145
+ 0% {
146
+ transform: translate(0px, 0px);
147
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
148
+ }
149
+ 49.603175% {
150
+ transform: translate(0px, 32px);
151
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
152
+ }
153
+ 99.206349% {
154
+ transform: translate(0px, 0px);
155
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
156
+ }
157
+ 100% {
158
+ transform: translate(0px, 0px);
159
+ }
160
+ }
161
+ </style>
162
+ </head>
163
+ <body>
164
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127">
165
+ <defs>
166
+ <linearGradient id="paint0_linear_4747_31154-4" x1="198.675" y1="-77.3474" x2="51.7215" y2="309.676" gradientUnits="userSpaceOnUse"><stop offset="0.04" stop-color="#FCFBF8" /><stop offset="0.91" stop-color="#B8C4FF" /></linearGradient>
167
+ <linearGradient id="paint1_linear_4747_31154-4" x1="54.5422" y1="179.544" x2="76.5043" y2="199.053" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
168
+ <linearGradient id="paint2_linear_4747_31154-4" x1="38.7391" y1="158.009" x2="81.2707" y2="204.612" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
169
+ <linearGradient id="paint3_linear_4747_31154-4" x1="54.7931" y1="162.363" x2="38.1544" y2="183.595" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
170
+ <linearGradient id="paint4_linear_4747_31154-4" x1="76.168" y1="28.0035" x2="-100.144" y2="92.0086" 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="paint5_linear_4747_31154-4" x1="110.992" y1="-9.01811" x2="-30.1361" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
172
+ <linearGradient id="paint6_linear_4747_31154-4" x1="174.992" y1="-9.01811" x2="33.8639" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
173
+ <linearGradient id="paint7_linear_4747_31154-4" x1="238.992" y1="-9.01811" x2="97.8639" y2="209.074" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
174
+ <linearGradient id="paint8_linear_4747_31154-4" x1="156.276" y1="21.2354" x2="115.992" y2="95.6105" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
175
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
176
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
177
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
178
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4747_31154"/>
179
+ </filter>
180
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
181
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
182
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
183
+ <feGaussianBlur stdDeviation="0.935156" result="effect1_foregroundBlur_4747_31154"/>
184
+ </filter>
185
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
186
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
187
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
188
+ <feGaussianBlur stdDeviation="9.17343" result="effect1_foregroundBlur_4747_31154"/>
189
+ </filter>
190
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter3_f_4747_31154" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
191
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
192
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
193
+ <feGaussianBlur stdDeviation="2.53814" result="effect1_foregroundBlur_4747_31154"/>
194
+ </filter>
195
+ <clipPath id="cb-node-1-3" clipPathUnits="userSpaceOnUse"><rect x="0" y="0" width="145" height="211" rx="6.89063"/></clipPath>
196
+ <clipPath id="cb-node-5-2" clipPathUnits="userSpaceOnUse"><rect x="33" y="163" width="44" height="39" rx="3.40292"/></clipPath>
197
+ <clipPath id="cb-node-6-2" clipPathUnits="userSpaceOnUse"><rect x="25.7822" y="163" width="57.7423" height="38.7956" rx="3.40292"/></clipPath>
198
+ <clipPath id="cb-node-8-2" clipPathUnits="userSpaceOnUse"><rect x="38.1011" y="168.102" width="11.7771" height="11.8626" rx="5.88855"/></clipPath>
199
+ <clipPath id="cb-node-13-2" clipPathUnits="userSpaceOnUse"><rect x="0" y="-5" width="150" height="80" rx="6"/></clipPath>
200
+ <clipPath id="cb-node-16-2" clipPathUnits="userSpaceOnUse"><rect x="-21" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
201
+ <clipPath id="cb-node-18-2" clipPathUnits="userSpaceOnUse"><rect x="42.6929" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
202
+ <clipPath id="cb-node-20-2" clipPathUnits="userSpaceOnUse"><rect x="106.386" y="87.0234" width="59.3003" height="46.1224" rx="4.39261"/></clipPath>
203
+ <mask id="am-node-1-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><g id="am-node-1-2-artwork"><rect x="45.5" y="23" width="145" height="81" rx="6" fill="var(--color-3)" /></g></mask>
204
+ <mask id="am-node-11-clip-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z" fill="var(--color-4)" /></mask>
205
+ <mask id="am-node-22-clip-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-4)" /></mask>
206
+ <mask id="am-node-22-clip-2-3" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-4)" /></mask>
207
+ <mask id="am-node-22-clip-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-4)" /></mask>
208
+ </defs>
209
+ <use href="#am-node-1-2-artwork" />
210
+ <g mask="url(#am-node-1-2)">
211
+ <g class="import-mvny2ub3-b">
212
+ <g fill="none">
213
+ <g fill="none">
214
+ <g fill="none" clip-path="url(#cb-node-1-3)">
215
+ <g fill="none">
216
+ <rect x="-0.219727" y="0.101562" width="147" height="211.591" rx="6.89063" fill="var(--color-5)" />
217
+ </g>
218
+ <g fill="none" filter="url(#filter0_f_4747_31154)">
219
+ <rect x="-18.5842" y="-12.8047" width="203.967" height="283.943" fill="url(#paint0_linear_4747_31154-4)" />
220
+ </g>
221
+ <g fill="none">
222
+ <path d="M-8 211L152 211V159.891C152 156.085 148.915 153 145.109 153L-1.10938 153C-4.91497 153 -8 156.085 -8 159.891L-8 211Z" fill="var(--color-2)" />
223
+ <g fill="none">
224
+ <g fill="none">
225
+ <g fill="none" clip-path="url(#cb-node-5-2)">
226
+ <g fill="none">
227
+ <g fill="none" clip-path="url(#cb-node-6-2)">
228
+ <rect x="25.7822" y="163" width="57.7423" height="38.7956" rx="3.40292" fill="var(--color-6)" />
229
+ </g>
230
+ </g>
231
+ <path d="M63.4548 171.484L46.8694 195.22L76.4497 191.316L63.4548 171.484Z" fill="url(#paint1_linear_4747_31154-4)" />
232
+ <path d="M93.2608 179.959C93.2608 179.959 70.5203 171.714 69.4112 171.296C68.3022 170.878 61.4207 168.945 63.4552 174.518C65.4768 180.056 66.5845 182.185 67.025 183.131C67.4656 184.076 69.2592 187.929 64.7465 189.351C59.6311 190.962 32.0435 198.611 32.0435 198.611V203.004H93.2608V179.959Z" fill="url(#paint2_linear_4747_31154-4)" />
233
+ <g fill="none">
234
+ <g fill="none" clip-path="url(#cb-node-8-2)">
235
+ <rect x="38.1011" y="168.102" width="11.7771" height="11.8626" rx="5.88855" fill="var(--color-1)" />
236
+ <g fill="none" filter="url(#filter1_f_4747_31154)">
237
+ <path d="M46.0588 160.799C45.5396 160.902 45.027 161.046 44.5278 161.229C42.4775 161.988 40.6602 163.433 39.462 165.467C36.7228 170.112 38.2472 176.062 42.8669 178.756C47.4866 181.449 53.451 179.864 56.1903 175.22C58.9295 170.572 57.4051 164.622 52.7887 161.931C50.6785 160.699 48.2921 160.363 46.0588 160.799Z" fill="url(#paint3_linear_4747_31154-4)" />
238
+ </g>
239
+ </g>
240
+ </g>
241
+ </g>
242
+ </g>
243
+ <g fill="none">
244
+ <rect x="87" y="177" width="24" height="2" rx="1" fill="var(--color-1)" />
245
+ <rect x="87" y="186" width="13" height="2" rx="1" fill="var(--color-1)" />
246
+ </g>
247
+ </g>
248
+ </g>
249
+ <g fill="none">
250
+ <g mask="url(#am-node-11-clip-2)">
251
+ <g fill="none">
252
+ <path d="M-2 71L148 71V6.89063C148 3.08504 144.915 0 141.109 0L4.89062 0C1.08503 0 -2 3.08504 -2 6.89063L-2 71Z" fill="var(--color-1)" />
253
+ <g fill="none">
254
+ <g fill="none" clip-path="url(#cb-node-13-2)">
255
+ <rect x="0" y="-5" width="150" height="80" rx="6" fill="var(--color-1)" />
256
+ <g fill="none" filter="url(#filter2_f_4747_31154)">
257
+ <path d="M 311.983 75.0391 L 311.983004 -13.7168 L 0.000004 -13.716814 L 0 75.039086 Z" fill="url(#paint4_linear_4747_31154-4)" />
258
+ </g>
259
+ </g>
260
+ </g>
261
+ </g>
262
+ </g>
263
+ </g>
264
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0px, 0px)" fill="none">
265
+ <g style="transform-origin: 72.500002px 28.773399px; transform: translate(-1px, 15px)" fill="none">
266
+ <rect x="30.4717" y="23.2734" width="84.0566" height="2" rx="1" fill="var(--color-1)" />
267
+ <rect x="49.5732" y="32.2734" width="45.8491" height="2" rx="1" fill="var(--color-1)" />
268
+ </g>
269
+ </g>
270
+ <g fill="none">
271
+ <g fill="none">
272
+ <g fill="none">
273
+ <g fill="none" clip-path="url(#cb-node-16-2)">
274
+ <rect x="-21" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
275
+ <rect x="-71.522" y="-24.7812" width="212.677" height="175.615" fill="url(#paint5_linear_4747_31154-4)" />
276
+ </g>
277
+ </g>
278
+ </g>
279
+ <g fill="none">
280
+ <g fill="none">
281
+ <g fill="none" clip-path="url(#cb-node-18-2)">
282
+ <rect x="42.6929" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
283
+ <rect x="-7.52197" y="-24.7812" width="212.677" height="175.615" fill="url(#paint6_linear_4747_31154-4)" />
284
+ </g>
285
+ </g>
286
+ </g>
287
+ <g fill="none">
288
+ <g fill="none">
289
+ <g fill="none" clip-path="url(#cb-node-20-2)">
290
+ <rect x="106.386" y="87.0234" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
291
+ <rect x="56.478" y="-24.7812" width="212.677" height="175.615" fill="url(#paint7_linear_4747_31154-4)" />
292
+ </g>
293
+ </g>
294
+ </g>
295
+ </g>
296
+ </g>
297
+ </g>
298
+ </g>
299
+ <g class="Icon-Container-2-2" fill="none">
300
+ <g mask="url(#am-node-22-clip-2-2)">
301
+ <g fill="none">
302
+ <path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-1)" />
303
+ <g fill="none" filter="url(#filter3_f_4747_31154)">
304
+ <path d="M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z" fill="url(#paint8_linear_4747_31154-4)" />
305
+ </g>
306
+ <path d="M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z" fill="var(--color-2)" />
307
+ </g>
308
+ </g>
309
+ </g>
310
+ <g class="Icon-Container-2-3" style="transform-origin: 114.923px 36.560651px; transform: translate(1px, -28px)" fill="none">
311
+ <g mask="url(#am-node-22-clip-2-3)">
312
+ <g fill="none">
313
+ <path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-1)" />
314
+ <g fill="none" filter="url(#filter3_f_4747_31154)">
315
+ <path d="M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z" fill="url(#paint8_linear_4747_31154-4)" />
316
+ </g>
317
+ <path d="M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z" fill="var(--color-2)" />
318
+ </g>
319
+ </g>
320
+ </g>
321
+ </g>
322
+ </g>
323
+ <g class="Icon-Container-2" fill="none">
324
+ <g mask="url(#am-node-22-clip-2)">
325
+ <g fill="none">
326
+ <path d="M 78.30155 42 L 66.69865 42.000001 A 2.17555 2.17555 89.999997 0 0 64.5231 44.175551 L 64.523101 55.778451 A 2.17555 2.17555 89.999997 0 0 66.698651 57.954001 L 78.301551 57.954 A 2.17555 2.17555 89.999997 0 0 80.477101 55.77845 L 80.4771 44.17555 A 2.17555 2.17555 89.999997 0 0 78.30155 42 Z" fill="var(--color-1)" />
327
+ <g fill="none" filter="url(#filter3_f_4747_31154)">
328
+ <path d="M165.323 57.9531L165.323 15.1673L64.523 15.1673L64.523 57.9531L165.323 57.9531Z" fill="url(#paint8_linear_4747_31154-4)" />
329
+ </g>
330
+ <path d="M69.5991 44.8984C70.8176 44.8985 71.8869 45.5312 72.4992 46.4855C73.1115 45.5309 74.1818 44.8984 75.4006 44.8984H77.0323C77.3326 44.8985 77.5762 45.142 77.5762 45.4423V47.074C77.5762 48.2929 76.9431 49.3625 75.9884 49.9747C76.9431 50.587 77.5761 51.6567 77.5762 52.8755V54.5071C77.5762 54.8075 77.3326 55.051 77.0323 55.051H75.4006C74.1815 55.051 73.1114 54.4182 72.4992 53.4633C71.8869 54.4178 70.8179 55.0509 69.5991 55.051H67.9675C67.6671 55.051 67.4236 54.8075 67.4236 54.5071V52.8755C67.4237 51.6568 68.0561 50.587 69.0106 49.9747C68.0561 49.3624 67.4236 48.2927 67.4236 47.074V45.4423C67.4236 45.1419 67.6671 44.8984 67.9675 44.8984H69.5991Z" fill="var(--color-2)" />
331
+ </g>
332
+ </g>
333
+ </g>
334
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(194px, 33px)">
335
+ <path d="M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z" fill="var(--color-2)" />
336
+ <g class="node-2">
337
+ <path d="M2 8.48438L2 17.4572" fill="none" stroke="var(--color-1)" stroke-width="4" stroke-linecap="round" />
338
+ </g>
339
+ </g>
340
+ </svg>
341
+ </body>
342
+ </html>