@wix/design-system-illustrations 2.35.3 → 2.36.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 (61) hide show
  1. package/dist/cjs/animated/HeaderScrollEffectDisappear.js +1 -1
  2. package/dist/cjs/animated/HeaderScrollEffectFadeOut.js +1 -1
  3. package/dist/cjs/animated/HeaderScrollEffectMoveWithPage.js +1 -1
  4. package/dist/cjs/animated/HeaderScrollEffectStayFixed.js +1 -1
  5. package/dist/cjs/animated/LimitScaling2.js +1 -4
  6. package/dist/cjs/animated/MaxMin.js +1 -3
  7. package/dist/cjs/animated/MobileAlgoFast.js +1 -2
  8. package/dist/cjs/animated/ResponsiveBehaviorElementsFixed.js +2 -5
  9. package/dist/cjs/animated/ResponsiveBehaviorElementsRelativeWidth.js +1 -1
  10. package/dist/cjs/animated/ResponsiveBehaviorElementsScaleProportionally.js +1 -1
  11. package/dist/cjs/animated/ResponsiveBehaviorElementsStretch.js +1 -4
  12. package/dist/cjs/animated/ResponsiveBehaviorHeaderFadeOut.js +7 -11
  13. package/dist/cjs/animated/ResponsiveBehaviorHeaderFreeze.js +7 -11
  14. package/dist/cjs/animated/ResponsiveBehaviorHeaderScrollWithSite.js +89 -0
  15. package/dist/cjs/animated/ResponsiveBehaviorScaleProportionally.js +1 -1
  16. package/dist/cjs/animated/ResponsiveBehaviorSectionAutoHeight.js +89 -0
  17. package/dist/cjs/animated/ResponsiveBehaviorSectionFixedHeight.js +1 -2
  18. package/dist/cjs/animated/ResponsiveBehaviorTextCustomScale.js +1 -1
  19. package/dist/cjs/animated/ResponsiveBehaviorTextFixed.js +1 -2
  20. package/dist/cjs/animated/ResponsiveBehaviorTextHug.js +1 -2
  21. package/dist/cjs/animated/ResponsiveBehaviorTextScaleProportionally.js +1 -1
  22. package/dist/cjs/animated/ResponsiveBehaviorWarp.js +1 -1
  23. package/dist/cjs/animated/SectionFixedHeight.js +1 -2
  24. package/dist/cjs/animated/SectionScale.js +1 -1
  25. package/dist/cjs/animated/animated.global.css +408 -123
  26. package/dist/cjs/animated/index.js +6 -0
  27. package/dist/esm/animated/HeaderScrollEffectDisappear.js +1 -1
  28. package/dist/esm/animated/HeaderScrollEffectFadeOut.js +1 -1
  29. package/dist/esm/animated/HeaderScrollEffectMoveWithPage.js +1 -1
  30. package/dist/esm/animated/HeaderScrollEffectStayFixed.js +1 -1
  31. package/dist/esm/animated/LimitScaling2.js +1 -4
  32. package/dist/esm/animated/MaxMin.js +1 -3
  33. package/dist/esm/animated/MobileAlgoFast.js +1 -2
  34. package/dist/esm/animated/ResponsiveBehaviorElementsFixed.js +2 -5
  35. package/dist/esm/animated/ResponsiveBehaviorElementsRelativeWidth.js +1 -1
  36. package/dist/esm/animated/ResponsiveBehaviorElementsScaleProportionally.js +1 -1
  37. package/dist/esm/animated/ResponsiveBehaviorElementsStretch.js +1 -4
  38. package/dist/esm/animated/ResponsiveBehaviorHeaderFadeOut.js +7 -11
  39. package/dist/esm/animated/ResponsiveBehaviorHeaderFreeze.js +7 -11
  40. package/dist/esm/animated/ResponsiveBehaviorHeaderScrollWithSite.js +45 -0
  41. package/dist/esm/animated/ResponsiveBehaviorScaleProportionally.js +1 -1
  42. package/dist/esm/animated/ResponsiveBehaviorSectionAutoHeight.js +45 -0
  43. package/dist/esm/animated/ResponsiveBehaviorSectionFixedHeight.js +1 -2
  44. package/dist/esm/animated/ResponsiveBehaviorTextCustomScale.js +1 -1
  45. package/dist/esm/animated/ResponsiveBehaviorTextFixed.js +1 -2
  46. package/dist/esm/animated/ResponsiveBehaviorTextHug.js +1 -2
  47. package/dist/esm/animated/ResponsiveBehaviorTextScaleProportionally.js +1 -1
  48. package/dist/esm/animated/ResponsiveBehaviorWarp.js +1 -1
  49. package/dist/esm/animated/SectionFixedHeight.js +1 -2
  50. package/dist/esm/animated/SectionScale.js +1 -1
  51. package/dist/esm/animated/animated.global.css +408 -123
  52. package/dist/esm/animated/index.js +4 -0
  53. package/dist/types/animated/ResponsiveBehaviorHeaderScrollWithSite.d.ts +7 -0
  54. package/dist/types/animated/ResponsiveBehaviorSectionAutoHeight.d.ts +7 -0
  55. package/dist/types/animated/index.d.ts +4 -0
  56. package/package.json +3 -3
  57. package/src/animated/ResponsiveBehaviorElementsFixed.html +90 -159
  58. package/src/animated/ResponsiveBehaviorHeaderFadeOut.html +156 -151
  59. package/src/animated/ResponsiveBehaviorHeaderFreeze.html +128 -158
  60. package/src/animated/ResponsiveBehaviorHeaderScrollWithSite.html +257 -0
  61. package/src/animated/ResponsiveBehaviorSectionAutoHeight.html +313 -0
package/src/animated/ResponsiveBehaviorHeaderScrollWithSite.html ADDED
@@ -0,0 +1,257 @@
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: #F8F6F6;
16
+ --color-4: #D9D9D9;
17
+ --color-5: #303030;
18
+ }
19
+
20
+ .import-msvsnwyw-7 {
21
+ transform-box: fill-box;
22
+ transform-origin: 50% 50%;
23
+ animation: import-msvsnwyw-7-transform 3360ms linear infinite both;
24
+ }
25
+
26
+ @keyframes import-msvsnwyw-7-transform {
27
+ 0% {
28
+ transform: translate(41px, 23px);
29
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
30
+ }
31
+ 50% {
32
+ transform: translate(41px, -106.4px);
33
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
34
+ }
35
+ 98.809524% {
36
+ transform: translate(41px, 23px);
37
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
38
+ }
39
+ 100% {
40
+ transform: translate(41px, 23px);
41
+ }
42
+ }
43
+
44
+ .node-2-3 {
45
+ transform-box: fill-box;
46
+ transform-origin: 50% 50%;
47
+ animation: node-2-3-transform 3360ms linear infinite both;
48
+ }
49
+
50
+ @keyframes node-2-3-transform {
51
+ 0% {
52
+ transform: translate(0px, 0px);
53
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
54
+ }
55
+ 50% {
56
+ transform: translate(0px, 31.965px);
57
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
58
+ }
59
+ 98.809524% {
60
+ transform: translate(0px, 0px);
61
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
62
+ }
63
+ 100% {
64
+ transform: translate(0px, 0px);
65
+ }
66
+ }
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127">
71
+ <defs>
72
+ <linearGradient id="paint0_linear_4371_16309" x1="178.227" y1="-83.0937" x2="-110.087" y2="145.731" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
73
+ <linearGradient id="paint1_linear_4371_16309" x1="95.39" y1="44.9158" x2="123.428" y2="69.4849" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
74
+ <linearGradient id="paint2_linear_4371_16309" x1="75.4543" y1="17.3794" x2="129.908" y2="76.2359" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
75
+ <linearGradient id="paint3_linear_4371_16309" x1="100.35" y1="24.3133" x2="83.4414" y2="45.8896" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
76
+ <linearGradient id="paint4_linear_4371_16309" x1="138.978" y1="-27.1478" x2="-8.29128" y2="171.419" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
77
+ <linearGradient id="paint5_linear_4371_16309" x1="162.389" y1="1.90174" x2="39.2589" y2="153.375" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
78
+ <linearGradient id="paint6_linear_4371_16309" x1="212.458" y1="17.0772" x2="103.741" y2="151.031" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
79
+ <linearGradient id="paint7_linear_4371_16309" x1="307.169" y1="-61.1983" x2="66.9405" y2="309.011" 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
+ <linearGradient id="paint8_linear_4371_16309" x1="141.161" y1="135.036" x2="91.0452" y2="223.425" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
81
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
82
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
83
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
84
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4371_16309"/>
85
+ </filter>
86
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
87
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
88
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
89
+ <feGaussianBlur stdDeviation="1.71335" result="effect1_foregroundBlur_4371_16309"/>
90
+ </filter>
91
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
92
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
93
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
94
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
95
+ </filter>
96
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter3_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
97
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
98
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
99
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
100
+ </filter>
101
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter4_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
102
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
103
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
104
+ <feGaussianBlur stdDeviation="11.2456" result="effect1_foregroundBlur_4371_16309"/>
105
+ </filter>
106
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter5_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
107
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
108
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
109
+ <feGaussianBlur stdDeviation="13.7813" result="effect1_foregroundBlur_4371_16309"/>
110
+ </filter>
111
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter6_f_4371_16309" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
112
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
113
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
114
+ <feGaussianBlur stdDeviation="4.07281" result="effect1_foregroundBlur_4371_16309"/>
115
+ </filter>
116
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4371_16309">
117
+ <rect width="147" height="210.525" fill="white"/>
118
+ </clipPath>
119
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4371_16309">
120
+ <rect width="147" height="231.984" fill="white"/>
121
+ </clipPath>
122
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4371_16309">
123
+ <rect x="76.7969" y="24.7422" width="52.7113" height="46.1224" rx="6.58892" fill="white"/>
124
+ </clipPath>
125
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_4371_16309">
126
+ <rect width="175.704" height="76.8707" fill="white" transform="translate(52.6367 11.5625)"/>
127
+ </clipPath>
128
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip4_4371_16309">
129
+ <rect x="83.3867" y="31.3281" width="10.9815" height="10.9815" rx="5.49077" fill="white"/>
130
+ </clipPath>
131
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip5_4371_16309">
132
+ <rect x="-19.8438" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
133
+ </clipPath>
134
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip6_4371_16309">
135
+ <rect x="43.8477" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
136
+ </clipPath>
137
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip7_4371_16309">
138
+ <rect x="107.543" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="white"/>
139
+ </clipPath>
140
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip8_4371_16309">
141
+ <rect width="146.703" height="57.4219" fill="white" transform="translate(0.167969 153.172)"/>
142
+ </clipPath>
143
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip9_4371_16309">
144
+ <rect x="63.1367" y="187.57" width="20.7258" height="7.65129" rx="3.82565" fill="white"/>
145
+ </clipPath>
146
+ <mask id="am-node-1-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><rect style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(82.5px, 41.6px) scale(1, 1)" x="-41.5" y="-18.5" width="147" height="81" rx="6" ry="6" fill="var(--color-4)" opacity="1" /></mask>
147
+ </defs>
148
+ <path display="none" 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="var(--color-5)" />
149
+ <g mask="url(#am-node-1-2-2)">
150
+ <g class="import-msvsnwyw-7">
151
+ <g fill="none" clip-path="url(#clip0_4371_16309)">
152
+ <g fill="none">
153
+ <rect x="-0.21875" y="0.101562" width="147" height="211.591" rx="0" ry="0" fill="var(--color-3)" />
154
+ </g>
155
+ <g fill="none" opacity="0.5" clip-path="url(#clip1_4371_16309)">
156
+ <rect x="0" y="0" width="147" height="231.984" fill="var(--color-1)" />
157
+ <g fill="none" filter="url(#filter0_f_4371_16309)">
158
+ <rect x="-1.14453" y="-113.258" width="209.016" height="336.055" fill="url(#paint0_linear_4371_16309)" />
159
+ </g>
160
+ </g>
161
+ <g fill="none">
162
+ <g fill="none">
163
+ <g fill="none" clip-path="url(#clip2_4371_16309)">
164
+ <g fill="none" clip-path="url(#clip3_4371_16309)">
165
+ <rect x="52.6367" y="11.5625" width="175.704" height="76.8707" fill="var(--color-1)" />
166
+ </g>
167
+ <g fill="none">
168
+ <path d="M106.633 34.6094L85.7109 64.9634L123.026 59.9707L106.633 34.6094Z" fill="url(#paint1_linear_4371_16309)" />
169
+ <path d="M162.428 52.6287C162.428 52.6287 115.546 34.9055 114.147 34.3712C112.748 33.837 104.067 31.3653 106.633 38.4918C109.184 45.5736 110.581 48.297 111.137 49.5063C111.692 50.7156 113.955 55.6428 108.262 57.461C101.809 59.5209 67.0078 69.3029 67.0078 69.3029V74.9207H162.428V52.6287Z" fill="url(#paint2_linear_4371_16309)" />
170
+ </g>
171
+ <g fill="none">
172
+ <g fill="none" clip-path="url(#clip4_4371_16309)">
173
+ <rect x="83.3867" y="31.3281" width="10.9815" height="10.9815" rx="5.49077" fill="var(--color-1)" />
174
+ <g fill="none" filter="url(#filter1_f_4371_16309)">
175
+ <path d="M91.474 22.724C90.9464 22.8289 90.4255 22.9744 89.9181 23.1605C87.8346 23.932 85.9879 25.4005 84.7702 27.4679C81.9866 32.188 83.5357 38.2345 88.2304 40.9718C92.925 43.7092 98.9862 42.0986 101.77 37.3784C104.553 32.6549 103.004 26.6084 98.3131 23.8745C96.1687 22.6225 93.7436 22.2808 91.474 22.724Z" fill="url(#paint3_linear_4371_16309)" />
176
+ </g>
177
+ </g>
178
+ </g>
179
+ </g>
180
+ </g>
181
+ <g fill="none">
182
+ <rect x="17.4961" y="37.9219" width="50.515" height="2.19631" rx="1.09815" fill="var(--color-1)" />
183
+ <rect x="17.4961" y="46.7031" width="50.515" height="2.19631" rx="1.09815" fill="var(--color-1)" />
184
+ <rect x="17.4961" y="55.4922" width="26.3557" height="2.19631" rx="1.09815" fill="var(--color-1)" />
185
+ </g>
186
+ </g>
187
+ <g fill="none">
188
+ <g fill="none">
189
+ <g fill="none">
190
+ <g fill="none" clip-path="url(#clip5_4371_16309)">
191
+ <rect x="-19.8438" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
192
+ <g fill="none" filter="url(#filter2_f_4371_16309)">
193
+ <rect x="-19.4297" y="-42.8281" width="184.587" height="174.692" fill="url(#paint4_linear_4371_16309)" />
194
+ </g>
195
+ </g>
196
+ </g>
197
+ </g>
198
+ <g fill="none">
199
+ <g fill="none">
200
+ <g fill="none" clip-path="url(#clip6_4371_16309)">
201
+ <rect x="43.8477" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
202
+ <g fill="none" filter="url(#filter3_f_4371_16309)">
203
+ <rect x="44.2617" y="-10.9141" width="137.649" height="142.779" fill="url(#paint5_linear_4371_16309)" />
204
+ </g>
205
+ </g>
206
+ </g>
207
+ </g>
208
+ <g fill="none">
209
+ <g fill="none">
210
+ <g fill="none" clip-path="url(#clip7_4371_16309)">
211
+ <rect x="107.543" y="85.8984" width="59.3003" height="46.1224" rx="4.39261" fill="var(--color-1)" />
212
+ <g fill="none" filter="url(#filter4_f_4371_16309)">
213
+ <rect x="107.961" y="5.75781" width="121.767" height="126.107" fill="url(#paint6_linear_4371_16309)" />
214
+ </g>
215
+ </g>
216
+ </g>
217
+ </g>
218
+ </g>
219
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(-0.1px, 0px)" fill="none" opacity="0.5" clip-path="url(#clip8_4371_16309)">
220
+ <rect x="0.019469" y="153.172" width="147" height="57.4219" fill="var(--color-1)" />
221
+ <g fill="none" filter="url(#filter5_f_4371_16309)">
222
+ <rect x="-2.29688" y="-88" width="360.609" height="298.594" fill="url(#paint7_linear_4371_16309)" />
223
+ </g>
224
+ </g>
225
+ <g fill="none">
226
+ <g fill="none">
227
+ <rect x="41.3281" y="168.547" width="64.3447" height="2.18608" rx="1.09304" fill="var(--color-1)" />
228
+ <rect x="55.9531" y="177.469" width="35.0971" height="2.18608" rx="1.09304" fill="var(--color-1)" />
229
+ </g>
230
+ <g fill="none">
231
+ <g fill="none" clip-path="url(#clip9_4371_16309)">
232
+ <rect x="63.1367" y="187.57" width="20.7258" height="7.65129" rx="3.82565" fill="var(--color-1)" />
233
+ <g fill="none" filter="url(#filter6_f_4371_16309)">
234
+ <path d="M62.5273 129.086H154.156V195.38H62.5273V129.086Z" fill="url(#paint8_linear_4371_16309)" />
235
+ </g>
236
+ </g>
237
+ </g>
238
+ </g>
239
+ </g>
240
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(-41.1px, -23px)" fill="none">
241
+ <rect x="41.0132" y="22.979" width="147.39" height="15.9656" fill="var(--color-1)" />
242
+ <rect x="160.768" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
243
+ <rect x="140.041" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
244
+ <rect x="119.314" y="29.812" width="13.8178" height="2.30296" rx="1.15148" fill="var(--color-2)" />
245
+ </g>
246
+ </g>
247
+ </g>
248
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(190.8px, 33.5px)">
249
+ <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)" />
250
+ <g class="node-2-3">
251
+ <line x1="2" y1="8.48682" x2="2" y2="17.4596" fill="none" stroke="var(--color-1)" stroke-width="4" stroke-linecap="round" />
252
+ </g>
253
+ </g>
254
+ <image style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0px, -42.000004px)" display="none" href="assets/image.png" x="0" y="42" width="236" height="127" preserveAspectRatio="xMidYMid meet" />
255
+ </svg>
256
+ </body>
257
+ </html>
package/src/animated/ResponsiveBehaviorSectionAutoHeight.html ADDED
@@ -0,0 +1,313 @@
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: #303030;
16
+ --color-4: #EAEFFF;
17
+ --color-5: #f8f6f6;
18
+ --color-6: #0d8ae0;
19
+ }
20
+
21
+ .Group-2147222115 {
22
+ transform-box: fill-box;
23
+ transform-origin: 73.5px 49px;
24
+ animation: Group-2147222115-transform 3375ms linear infinite both;
25
+ }
26
+
27
+ @keyframes Group-2147222115-transform {
28
+ 0% {
29
+ transform: scale(1, 1);
30
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
31
+ }
32
+ 49.382716% {
33
+ transform: scale(0.61, 0.61);
34
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
35
+ }
36
+ 98.765432% {
37
+ transform: scale(1, 1);
38
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
39
+ }
40
+ 100% {
41
+ transform: scale(1, 1);
42
+ }
43
+ }
44
+
45
+ .Vector {
46
+ transform-box: fill-box;
47
+ transform-origin: 50% 50%;
48
+ animation: Vector-transform 3375ms linear infinite both;
49
+ }
50
+
51
+ @keyframes Vector-transform {
52
+ 0% {
53
+ transform: translate(0px, 0px);
54
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
55
+ }
56
+ 49.382716% {
57
+ transform: translate(28.7px, 0px);
58
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
59
+ }
60
+ 98.765432% {
61
+ transform: translate(0px, 0px);
62
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
63
+ }
64
+ 100% {
65
+ transform: translate(0px, 0px);
66
+ }
67
+ }
68
+
69
+ .Vector_2 {
70
+ transform-box: fill-box;
71
+ transform-origin: 50% 50%;
72
+ animation: Vector_2-transform 3375ms linear infinite both;
73
+ }
74
+
75
+ @keyframes Vector_2-transform {
76
+ 0% {
77
+ transform: translate(0px, 0px);
78
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
79
+ }
80
+ 49.382716% {
81
+ transform: translate(-28.7px, 0px);
82
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
83
+ }
84
+ 98.765432% {
85
+ transform: translate(0px, 0px);
86
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
87
+ }
88
+ 100% {
89
+ transform: translate(0px, 0px);
90
+ }
91
+ }
92
+
93
+ .group-mtiokycx-8 {
94
+ transform-box: fill-box;
95
+ transform-origin: 50% 50%;
96
+ animation:
97
+ group-mtiokycx-8-transform 3375ms linear infinite both,
98
+ group-mtiokycx-8-opacity 3375ms linear infinite both;
99
+ }
100
+
101
+ @keyframes group-mtiokycx-8-transform {
102
+ 0% {
103
+ transform: translate(0px, 3px);
104
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
105
+ }
106
+ 24.681481% {
107
+ transform: translate(0px, 3px);
108
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
109
+ }
110
+ 49.382716% {
111
+ transform: translate(0px, 0px);
112
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
113
+ }
114
+ 100% {
115
+ transform: translate(0px, 0px);
116
+ }
117
+ }
118
+
119
+ @keyframes group-mtiokycx-8-opacity {
120
+ 0% {
121
+ opacity: 0;
122
+ }
123
+ 24.681481% {
124
+ opacity: 0;
125
+ }
126
+ 37.037037% {
127
+ opacity: 1;
128
+ }
129
+ 49.382716% {
130
+ opacity: 1;
131
+ }
132
+ 61.728395% {
133
+ opacity: 0;
134
+ }
135
+ 100% {
136
+ opacity: 0;
137
+ }
138
+ }
139
+
140
+ .group-mtiol0y9-9 {
141
+ transform-box: fill-box;
142
+ transform-origin: 50% 50%;
143
+ animation:
144
+ group-mtiol0y9-9-transform 3375ms linear infinite both,
145
+ group-mtiol0y9-9-opacity 3375ms linear infinite both;
146
+ }
147
+
148
+ @keyframes group-mtiol0y9-9-transform {
149
+ 0% {
150
+ transform: translate(0px, -3px);
151
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
152
+ }
153
+ 24.681481% {
154
+ transform: translate(0px, -3px);
155
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
156
+ }
157
+ 49.382716% {
158
+ transform: translate(0px, 0px);
159
+ animation-timing-function: cubic-bezier(0.602977, 0, 0.397023, 1);
160
+ }
161
+ 100% {
162
+ transform: translate(0px, 0px);
163
+ }
164
+ }
165
+
166
+ @keyframes group-mtiol0y9-9-opacity {
167
+ 0% {
168
+ opacity: 0;
169
+ }
170
+ 24.681481% {
171
+ opacity: 0;
172
+ }
173
+ 37.037037% {
174
+ opacity: 1;
175
+ }
176
+ 49.382716% {
177
+ opacity: 1;
178
+ }
179
+ 61.728395% {
180
+ opacity: 0;
181
+ }
182
+ 100% {
183
+ opacity: 0;
184
+ }
185
+ }
186
+
187
+ .rect-msbreia1-12 {
188
+ transform-box: fill-box;
189
+ transform-origin: 50% 50%;
190
+ animation: rect-msbreia1-12-transform 3375ms linear infinite both;
191
+ }
192
+
193
+ .rect-msbreia1-12-shape {
194
+ animation: rect-msbreia1-12-width 3375ms linear infinite both;
195
+ }
196
+
197
+ @keyframes rect-msbreia1-12-transform {
198
+ 0% {
199
+ transform: translate(-31.8px, 0px);
200
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
201
+ }
202
+ 49.382716% {
203
+ transform: translate(-3.2475px, 0px);
204
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
205
+ }
206
+ 98.765432% {
207
+ transform: translate(-31.7475px, 0px);
208
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
209
+ }
210
+ 100% {
211
+ transform: translate(-31.7475px, 0px);
212
+ }
213
+ }
214
+
215
+ @keyframes rect-msbreia1-12-width {
216
+ 0% {
217
+ width: 147px;
218
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
219
+ }
220
+ 49.382716% {
221
+ width: 90px;
222
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
223
+ }
224
+ 98.765432% {
225
+ width: 147px;
226
+ animation-timing-function: cubic-bezier(0.799699, 0, 0.200301, 1);
227
+ }
228
+ 100% {
229
+ width: 147px;
230
+ }
231
+ }
232
+ </style>
233
+ </head>
234
+ <body>
235
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
236
+ <defs>
237
+ <linearGradient id="paint0_linear_4410_18988" 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>
238
+ <linearGradient id="paint0_linear_4410_19017" x1="4.85092" y1="0.499255" x2="4.85092" y2="8.98454" gradientUnits="userSpaceOnUse"><stop offset="0.04" stop-color="#626262" /><stop offset="0.45" stop-color="#EAEFFF" /></linearGradient>
239
+ <linearGradient id="paint1_linear_4410_18988" x1="180.44" y1="19.9831" x2="134.59" y2="100.848" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
240
+ <linearGradient id="paint1_linear_4410_19017" x1="4.85092" y1="73.8836" x2="4.85092" y2="65.3983" gradientUnits="userSpaceOnUse"><stop offset="0.04" stop-color="#626262" /><stop offset="0.45" stop-color="#EAEFFF" /></linearGradient>
241
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_f_4410_18988" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
242
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
243
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
244
+ <feGaussianBlur stdDeviation="9.17343" result="effect1_foregroundBlur_4410_18988"/>
245
+ </filter>
246
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4410_18988" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
247
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
248
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
249
+ <feGaussianBlur stdDeviation="3.72612" result="effect1_foregroundBlur_4410_18988"/>
250
+ </filter>
251
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4410_18988">
252
+ <rect x="44.5" y="23.3359" width="147" height="81.0415" rx="6" fill="white"/>
253
+ </clipPath>
254
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4410_18988">
255
+ <rect x="108.5" y="68.0469" width="19" height="7" rx="3.5" fill="white"/>
256
+ </clipPath>
257
+ </defs>
258
+ <g fill="none">
259
+ <path display="none" 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="var(--color-3)" />
260
+ <g class="rect-msbreia1-12">
261
+ <rect class="rect-msbreia1-12-shape" x="76.2475" y="23.3" width="83.505" height="81" rx="6" ry="6" fill="var(--color-5)" stroke="var(--color-6)" stroke-width="0" opacity="0.57" />
262
+ </g>
263
+ <g fill="none">
264
+ <g fill="none">
265
+ <g class="Vector">
266
+ <path d="M42 67.8594V59.8594C42 59.3071 41.5523 58.8594 41 58.8594C40.4477 58.8594 40 59.3071 40 59.8594V67.8594C40 68.4117 40.4477 68.8594 41 68.8594C41.5523 68.8594 42 68.4117 42 67.8594Z" fill="var(--color-2)" />
267
+ </g>
268
+ <g class="Vector_2">
269
+ <path d="M196 67.8594V59.8594C196 59.3071 195.552 58.8594 195 58.8594C194.448 58.8594 194 59.3071 194 59.8594V67.8594C194 68.4117 194.448 68.8594 195 68.8594C195.552 68.8594 196 68.4117 196 67.8594Z" fill="var(--color-2)" />
270
+ </g>
271
+ </g>
272
+ <g class="Group-2147222115" fill="none">
273
+ <g fill="none" opacity="0.5" />
274
+ <g fill="none">
275
+ <g fill="none" clip-path="url(#clip0_4410_18988)">
276
+ <rect x="44.5" y="23.3359" width="147" height="81.0415" rx="6" fill="var(--color-1)" />
277
+ <g fill="none" filter="url(#filter0_f_4410_18988)">
278
+ <path d="M 356.484 104.375 L 356.484004 15.6191 L 44.501004 15.619086 L 44.501 104.374986 Z" fill="url(#paint0_linear_4410_18988)" />
279
+ </g>
280
+ </g>
281
+ </g>
282
+ <g fill="none">
283
+ <g fill="none">
284
+ <rect x="93.1406" y="54.5781" width="49.7295" height="1.5" rx="0.75" fill="var(--color-1)" />
285
+ <rect x="104.438" y="60.3672" width="27.1252" height="1.5" rx="0.75" fill="var(--color-1)" />
286
+ </g>
287
+ <g fill="none">
288
+ <g fill="none" clip-path="url(#clip1_4410_18988)">
289
+ <rect x="108.5" y="68.0469" width="19" height="7" rx="3.5" fill="var(--color-1)" />
290
+ <g fill="none" filter="url(#filter1_f_4410_18988)">
291
+ <path d="M108.5 14.5391H192.329V75.1902H108.5V14.5391Z" fill="url(#paint1_linear_4410_18988)" />
292
+ </g>
293
+ </g>
294
+ </g>
295
+ </g>
296
+ </g>
297
+ </g>
298
+ </g>
299
+ <g style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(113.152572px, 26.667997px)">
300
+ <g class="group-mtiokycx-8">
301
+ <path d="M5.35096 73.8834L5.35096 65.3981L4.35096 65.3981L4.35096 73.8834L5.35096 73.8834Z" fill="url(#paint1_linear_4410_19017)" />
302
+ <path d="M4.85069 64.8985C4.70243 64.8985 4.5619 64.9644 4.46691 65.0782L1.96691 68.0782L2.73448 68.7189L4.85069 66.1788L6.96691 68.7189L7.73448 68.0782L5.23448 65.0782L5.15538 65.0021C5.06881 64.9355 4.9619 64.8985 4.85069 64.8985Z" fill="var(--color-4)" />
303
+ </g>
304
+ <g class="group-mtiol0y9-9">
305
+ <path d="M5.35096 0.499398L5.35096 8.98475L4.35096 8.98475L4.35096 0.499398L5.35096 0.499398Z" fill="url(#paint0_linear_4410_19017)" />
306
+ <path d="M4.85069 9.48427C4.70243 9.48427 4.5619 9.4184 4.46691 9.30458L1.96691 6.30458L2.73448 5.66395L4.85069 8.20399L6.96691 5.66395L7.73448 6.30458L5.23448 9.30458L5.15538 9.38075C5.06881 9.44728 4.9619 9.48427 4.85069 9.48427Z" fill="var(--color-4)" />
307
+ </g>
308
+ </g>
309
+ <image display="none" href="assets/image.png" x="0" y="0" width="236" height="127" preserveAspectRatio="xMidYMid meet" />
310
+ <image display="none" href="assets/image-2.png" x="0" y="0" width="236" height="127" preserveAspectRatio="xMidYMid meet" />
311
+ </svg>
312
+ </body>
313
+ </html>