@wix/design-system-illustrations 2.29.0 → 2.31.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 (448) hide show
  1. package/dist/cjs/AvatarCircle.js +2 -2
  2. package/dist/cjs/AvatarSquare.js +2 -2
  3. package/dist/cjs/BlogFullPost.js +2 -2
  4. package/dist/cjs/BlogOneColumn.js +2 -2
  5. package/dist/cjs/BlogTagButton.js +2 -2
  6. package/dist/cjs/BookingsGrid.js +6 -9
  7. package/dist/cjs/BookingsOverlapping.js +5 -4
  8. package/dist/cjs/BookingsSideBySide.js +4 -4
  9. package/dist/cjs/BookingsStrip.js +1 -1
  10. package/dist/cjs/ButtonsLayoutIconsIdentity.js +53 -0
  11. package/dist/cjs/ButtonsLayoutRowIdentity.js +53 -0
  12. package/dist/cjs/ButtonsLayoutStackIdentity.js +53 -0
  13. package/dist/cjs/DividerLineIdentity.js +51 -0
  14. package/dist/cjs/DividerLineTextIdentity.js +54 -0
  15. package/dist/cjs/EventLayoutAlternating.js +3 -3
  16. package/dist/cjs/EventLayoutLeft.js +1 -1
  17. package/dist/cjs/EventLayoutRight.js +3 -3
  18. package/dist/cjs/EventLeft.js +5 -5
  19. package/dist/cjs/EventRight.js +5 -5
  20. package/dist/cjs/EventsZoomIn.js +56 -0
  21. package/dist/cjs/FileShareFill.js +52 -0
  22. package/dist/cjs/FileShareLabel.js +52 -0
  23. package/dist/cjs/FileShareLine.js +52 -0
  24. package/dist/cjs/FormLayoutAboveIdentity.js +52 -0
  25. package/dist/cjs/FormLayoutBelowIdentity.js +52 -0
  26. package/dist/cjs/GalleryBlur.js +4 -4
  27. package/dist/cjs/GalleryColorIn.js +1 -1
  28. package/dist/cjs/GalleryExpand.js +9 -9
  29. package/dist/cjs/GalleryExpandOut.js +8 -8
  30. package/dist/cjs/GalleryFade.js +2 -2
  31. package/dist/cjs/GalleryFadeIn.js +5 -5
  32. package/dist/cjs/GalleryInvert.js +2 -2
  33. package/dist/cjs/GalleryMoveUp.js +8 -7
  34. package/dist/cjs/GalleryNoChange.js +1 -1
  35. package/dist/cjs/GalleryOneColor.js +4 -4
  36. package/dist/cjs/GalleryShrink.js +10 -10
  37. package/dist/cjs/GallerySlideDown.js +7 -7
  38. package/dist/cjs/GallerySlideRight.js +7 -7
  39. package/dist/cjs/GallerySlideUp.js +5 -6
  40. package/dist/cjs/GalleryZoomOut.js +11 -2
  41. package/dist/cjs/IconPositionBottom.js +54 -0
  42. package/dist/cjs/IconPositionLeft.js +55 -0
  43. package/dist/cjs/IconPositionRight.js +54 -0
  44. package/dist/cjs/IconPositionTop.js +55 -0
  45. package/dist/cjs/IdentityButtonsLayoutIcons.js +53 -0
  46. package/dist/cjs/IdentityButtonsLayoutRow.js +53 -0
  47. package/dist/cjs/IdentityButtonsLayoutStack.js +53 -0
  48. package/dist/cjs/IdentityDividerLine.js +51 -0
  49. package/dist/cjs/IdentityDividerText.js +54 -0
  50. package/dist/cjs/MembersAreaLargeSize.js +52 -0
  51. package/dist/cjs/MembersAreaMediumSize.js +52 -0
  52. package/dist/cjs/MembersAreaSmallSize.js +52 -0
  53. package/dist/cjs/MembersIcon.js +3 -7
  54. package/dist/cjs/MembersName.js +2 -2
  55. package/dist/cjs/MembersNameAndIcon.js +2 -3
  56. package/dist/cjs/MenuDividerDash.js +51 -0
  57. package/dist/cjs/MenuDividerDots.js +52 -0
  58. package/dist/cjs/MenuDividerLine.js +51 -0
  59. package/dist/cjs/OnlineOrderBelowOrder.js +52 -0
  60. package/dist/cjs/OnlineOrderCard.js +53 -0
  61. package/dist/cjs/OnlineOrderImageRight.js +53 -0
  62. package/dist/cjs/OnlineOrderOnImage.js +52 -0
  63. package/dist/cjs/PricingLayoutAbove.js +5 -5
  64. package/dist/cjs/PricingLayoutBelow.js +4 -4
  65. package/dist/cjs/PricingLayoutLeft.js +5 -5
  66. package/dist/cjs/PricingLayoutRight.js +5 -5
  67. package/dist/cjs/RestauransMenusCenter.js +51 -0
  68. package/dist/cjs/RestauransMenusExpand.js +53 -0
  69. package/dist/cjs/RestauransMenusSplitImageText.js +53 -0
  70. package/dist/cjs/RestaurantStrip.js +2 -2
  71. package/dist/cjs/StoreAboveInfo.js +2 -2
  72. package/dist/cjs/StoreAccordionCollapse.js +1 -1
  73. package/dist/cjs/StoreBelowInfo.js +3 -3
  74. package/dist/cjs/StoreButtons.js +1 -1
  75. package/dist/cjs/StoreCategoryMenuTypeVertical.js +54 -0
  76. package/dist/cjs/StoreCollapse.js +3 -3
  77. package/dist/cjs/StoreDrawer.js +5 -7
  78. package/dist/cjs/StoreDropdown.js +2 -2
  79. package/dist/cjs/StoreHeaderPositionMinimised.js +55 -0
  80. package/dist/cjs/StoreHeaderPositionStretched.js +54 -0
  81. package/dist/cjs/StoreImageBottom.js +53 -0
  82. package/dist/cjs/StoreImageCard.js +52 -0
  83. package/dist/cjs/StoreImagePlacementSide.js +53 -0
  84. package/dist/cjs/StoreImagePlacementTop.js +53 -0
  85. package/dist/cjs/StoreInline.js +3 -4
  86. package/dist/cjs/StoreNegativeBack.js +4 -4
  87. package/dist/cjs/StoreOnImage.js +4 -3
  88. package/dist/cjs/StorePopUp.js +7 -9
  89. package/dist/cjs/StorePriceSideBySide.js +3 -3
  90. package/dist/cjs/StorePriceStacked.js +3 -3
  91. package/dist/cjs/StoreProductInfo.js +2 -3
  92. package/dist/cjs/StoreProductLayoutClassic.js +53 -0
  93. package/dist/cjs/StoreRibonHorizontal.js +52 -0
  94. package/dist/cjs/StoreRibonStack.js +52 -0
  95. package/dist/cjs/StoreSideBySide.js +2 -2
  96. package/dist/cjs/StoreSleek.js +2 -2
  97. package/dist/cjs/StoreSpotlight.js +5 -4
  98. package/dist/cjs/StoreStreched.js +2 -2
  99. package/dist/cjs/StoreStunning.js +2 -2
  100. package/dist/cjs/StoreSwapImage.js +2 -2
  101. package/dist/cjs/StoreTrim.js +2 -2
  102. package/dist/cjs/StoreWrap.js +3 -3
  103. package/dist/cjs/animated/ElementsFixedHeight.js +3 -2
  104. package/dist/cjs/animated/ElementsFixedMargins.js +3 -2
  105. package/dist/cjs/animated/ElementsScale.js +3 -2
  106. package/dist/cjs/animated/HeaderScrollEffectDisappear.js +89 -0
  107. package/dist/cjs/animated/HeaderScrollEffectFadeOut.js +89 -0
  108. package/dist/cjs/animated/HeaderScrollEffectMoveWithPage.js +89 -0
  109. package/dist/cjs/animated/HeaderScrollEffectStayFixed.js +89 -0
  110. package/dist/cjs/animated/LimitScaling2.js +91 -0
  111. package/dist/cjs/animated/MaxMin.js +90 -0
  112. package/dist/cjs/animated/MobileAlgoFast.js +89 -0
  113. package/dist/cjs/animated/ResponsiveBehaviorElementsFixed.js +91 -0
  114. package/dist/cjs/animated/ResponsiveBehaviorElementsRelativeWidth.js +88 -0
  115. package/dist/cjs/animated/ResponsiveBehaviorElementsScaleProportionally.js +88 -0
  116. package/dist/cjs/animated/ResponsiveBehaviorElementsStretch.js +91 -0
  117. package/dist/cjs/animated/ResponsiveBehaviorHeaderFadeOut.js +94 -0
  118. package/dist/cjs/animated/ResponsiveBehaviorHeaderFreeze.js +94 -0
  119. package/dist/cjs/animated/ResponsiveBehaviorScaleProportionally.js +88 -0
  120. package/dist/cjs/animated/ResponsiveBehaviorSectionFixedHeight.js +89 -0
  121. package/dist/cjs/animated/ResponsiveBehaviorTextCustomScale.js +88 -0
  122. package/dist/cjs/animated/ResponsiveBehaviorTextFixed.js +89 -0
  123. package/dist/cjs/animated/ResponsiveBehaviorTextHug.js +89 -0
  124. package/dist/cjs/animated/ResponsiveBehaviorTextScaleProportionally.js +88 -0
  125. package/dist/cjs/animated/ResponsiveBehaviorWarp.js +88 -0
  126. package/dist/cjs/animated/SectionFixedHeight.js +4 -3
  127. package/dist/cjs/animated/SectionScale.js +3 -2
  128. package/dist/cjs/animated/animated.global.css +5485 -0
  129. package/dist/cjs/animated/index.js +60 -0
  130. package/dist/cjs/index.js +129 -0
  131. package/dist/esm/AvatarCircle.js +2 -2
  132. package/dist/esm/AvatarSquare.js +2 -2
  133. package/dist/esm/BlogFullPost.js +2 -2
  134. package/dist/esm/BlogOneColumn.js +2 -2
  135. package/dist/esm/BlogTagButton.js +2 -2
  136. package/dist/esm/BookingsGrid.js +6 -9
  137. package/dist/esm/BookingsOverlapping.js +5 -4
  138. package/dist/esm/BookingsSideBySide.js +4 -4
  139. package/dist/esm/BookingsStrip.js +1 -1
  140. package/dist/esm/ButtonsLayoutIconsIdentity.js +19 -0
  141. package/dist/esm/ButtonsLayoutRowIdentity.js +19 -0
  142. package/dist/esm/ButtonsLayoutStackIdentity.js +19 -0
  143. package/dist/esm/DividerLineIdentity.js +17 -0
  144. package/dist/esm/DividerLineTextIdentity.js +20 -0
  145. package/dist/esm/EventLayoutAlternating.js +3 -3
  146. package/dist/esm/EventLayoutLeft.js +1 -1
  147. package/dist/esm/EventLayoutRight.js +3 -3
  148. package/dist/esm/EventLeft.js +5 -5
  149. package/dist/esm/EventRight.js +5 -5
  150. package/dist/esm/EventsZoomIn.js +22 -0
  151. package/dist/esm/FileShareFill.js +18 -0
  152. package/dist/esm/FileShareLabel.js +18 -0
  153. package/dist/esm/FileShareLine.js +18 -0
  154. package/dist/esm/FormLayoutAboveIdentity.js +18 -0
  155. package/dist/esm/FormLayoutBelowIdentity.js +18 -0
  156. package/dist/esm/GalleryBlur.js +4 -4
  157. package/dist/esm/GalleryColorIn.js +1 -1
  158. package/dist/esm/GalleryExpand.js +9 -9
  159. package/dist/esm/GalleryExpandOut.js +8 -8
  160. package/dist/esm/GalleryFade.js +2 -2
  161. package/dist/esm/GalleryFadeIn.js +5 -5
  162. package/dist/esm/GalleryInvert.js +2 -2
  163. package/dist/esm/GalleryMoveUp.js +8 -7
  164. package/dist/esm/GalleryNoChange.js +1 -1
  165. package/dist/esm/GalleryOneColor.js +4 -4
  166. package/dist/esm/GalleryShrink.js +10 -10
  167. package/dist/esm/GallerySlideDown.js +7 -7
  168. package/dist/esm/GallerySlideRight.js +7 -7
  169. package/dist/esm/GallerySlideUp.js +5 -6
  170. package/dist/esm/GalleryZoomOut.js +11 -2
  171. package/dist/esm/IconPositionBottom.js +20 -0
  172. package/dist/esm/IconPositionLeft.js +21 -0
  173. package/dist/esm/IconPositionRight.js +20 -0
  174. package/dist/esm/IconPositionTop.js +21 -0
  175. package/dist/esm/IdentityButtonsLayoutIcons.js +19 -0
  176. package/dist/esm/IdentityButtonsLayoutRow.js +19 -0
  177. package/dist/esm/IdentityButtonsLayoutStack.js +19 -0
  178. package/dist/esm/IdentityDividerLine.js +17 -0
  179. package/dist/esm/IdentityDividerText.js +20 -0
  180. package/dist/esm/MembersAreaLargeSize.js +18 -0
  181. package/dist/esm/MembersAreaMediumSize.js +18 -0
  182. package/dist/esm/MembersAreaSmallSize.js +18 -0
  183. package/dist/esm/MembersIcon.js +3 -7
  184. package/dist/esm/MembersName.js +2 -2
  185. package/dist/esm/MembersNameAndIcon.js +2 -3
  186. package/dist/esm/MenuDividerDash.js +17 -0
  187. package/dist/esm/MenuDividerDots.js +18 -0
  188. package/dist/esm/MenuDividerLine.js +17 -0
  189. package/dist/esm/OnlineOrderBelowOrder.js +18 -0
  190. package/dist/esm/OnlineOrderCard.js +19 -0
  191. package/dist/esm/OnlineOrderImageRight.js +19 -0
  192. package/dist/esm/OnlineOrderOnImage.js +18 -0
  193. package/dist/esm/PricingLayoutAbove.js +5 -5
  194. package/dist/esm/PricingLayoutBelow.js +4 -4
  195. package/dist/esm/PricingLayoutLeft.js +5 -5
  196. package/dist/esm/PricingLayoutRight.js +5 -5
  197. package/dist/esm/RestauransMenusCenter.js +17 -0
  198. package/dist/esm/RestauransMenusExpand.js +19 -0
  199. package/dist/esm/RestauransMenusSplitImageText.js +19 -0
  200. package/dist/esm/RestaurantStrip.js +2 -2
  201. package/dist/esm/StoreAboveInfo.js +2 -2
  202. package/dist/esm/StoreAccordionCollapse.js +1 -1
  203. package/dist/esm/StoreBelowInfo.js +3 -3
  204. package/dist/esm/StoreButtons.js +1 -1
  205. package/dist/esm/StoreCategoryMenuTypeVertical.js +20 -0
  206. package/dist/esm/StoreCollapse.js +3 -3
  207. package/dist/esm/StoreDrawer.js +5 -7
  208. package/dist/esm/StoreDropdown.js +2 -2
  209. package/dist/esm/StoreHeaderPositionMinimised.js +21 -0
  210. package/dist/esm/StoreHeaderPositionStretched.js +20 -0
  211. package/dist/esm/StoreImageBottom.js +19 -0
  212. package/dist/esm/StoreImageCard.js +18 -0
  213. package/dist/esm/StoreImagePlacementSide.js +19 -0
  214. package/dist/esm/StoreImagePlacementTop.js +19 -0
  215. package/dist/esm/StoreInline.js +3 -4
  216. package/dist/esm/StoreNegativeBack.js +4 -4
  217. package/dist/esm/StoreOnImage.js +4 -3
  218. package/dist/esm/StorePopUp.js +7 -9
  219. package/dist/esm/StorePriceSideBySide.js +3 -3
  220. package/dist/esm/StorePriceStacked.js +3 -3
  221. package/dist/esm/StoreProductInfo.js +2 -3
  222. package/dist/esm/StoreProductLayoutClassic.js +19 -0
  223. package/dist/esm/StoreRibonHorizontal.js +18 -0
  224. package/dist/esm/StoreRibonStack.js +18 -0
  225. package/dist/esm/StoreSideBySide.js +2 -2
  226. package/dist/esm/StoreSleek.js +2 -2
  227. package/dist/esm/StoreSpotlight.js +5 -4
  228. package/dist/esm/StoreStreched.js +2 -2
  229. package/dist/esm/StoreStunning.js +2 -2
  230. package/dist/esm/StoreSwapImage.js +2 -2
  231. package/dist/esm/StoreTrim.js +2 -2
  232. package/dist/esm/StoreWrap.js +3 -3
  233. package/dist/esm/animated/ElementsFixedHeight.js +4 -3
  234. package/dist/esm/animated/ElementsFixedMargins.js +4 -3
  235. package/dist/esm/animated/ElementsScale.js +4 -3
  236. package/dist/esm/animated/HeaderScrollEffectDisappear.js +45 -0
  237. package/dist/esm/animated/HeaderScrollEffectFadeOut.js +45 -0
  238. package/dist/esm/animated/HeaderScrollEffectMoveWithPage.js +45 -0
  239. package/dist/esm/animated/HeaderScrollEffectStayFixed.js +45 -0
  240. package/dist/esm/animated/LimitScaling2.js +47 -0
  241. package/dist/esm/animated/MaxMin.js +46 -0
  242. package/dist/esm/animated/MobileAlgoFast.js +45 -0
  243. package/dist/esm/animated/ResponsiveBehaviorElementsFixed.js +47 -0
  244. package/dist/esm/animated/ResponsiveBehaviorElementsRelativeWidth.js +44 -0
  245. package/dist/esm/animated/ResponsiveBehaviorElementsScaleProportionally.js +44 -0
  246. package/dist/esm/animated/ResponsiveBehaviorElementsStretch.js +47 -0
  247. package/dist/esm/animated/ResponsiveBehaviorHeaderFadeOut.js +50 -0
  248. package/dist/esm/animated/ResponsiveBehaviorHeaderFreeze.js +50 -0
  249. package/dist/esm/animated/ResponsiveBehaviorScaleProportionally.js +44 -0
  250. package/dist/esm/animated/ResponsiveBehaviorSectionFixedHeight.js +45 -0
  251. package/dist/esm/animated/ResponsiveBehaviorTextCustomScale.js +44 -0
  252. package/dist/esm/animated/ResponsiveBehaviorTextFixed.js +45 -0
  253. package/dist/esm/animated/ResponsiveBehaviorTextHug.js +45 -0
  254. package/dist/esm/animated/ResponsiveBehaviorTextScaleProportionally.js +44 -0
  255. package/dist/esm/animated/ResponsiveBehaviorWarp.js +44 -0
  256. package/dist/esm/animated/SectionFixedHeight.js +5 -4
  257. package/dist/esm/animated/SectionScale.js +4 -3
  258. package/dist/esm/animated/animated.global.css +5485 -0
  259. package/dist/esm/animated/index.js +40 -0
  260. package/dist/esm/index.js +86 -0
  261. package/dist/types/ButtonsLayoutIconsIdentity.d.ts +5 -0
  262. package/dist/types/ButtonsLayoutRowIdentity.d.ts +5 -0
  263. package/dist/types/ButtonsLayoutStackIdentity.d.ts +5 -0
  264. package/dist/types/DividerLineIdentity.d.ts +5 -0
  265. package/dist/types/DividerLineTextIdentity.d.ts +5 -0
  266. package/dist/types/EventsZoomIn.d.ts +5 -0
  267. package/dist/types/FileShareFill.d.ts +5 -0
  268. package/dist/types/FileShareLabel.d.ts +5 -0
  269. package/dist/types/FileShareLine.d.ts +5 -0
  270. package/dist/types/FormLayoutAboveIdentity.d.ts +5 -0
  271. package/dist/types/FormLayoutBelowIdentity.d.ts +5 -0
  272. package/dist/types/IconPositionBottom.d.ts +5 -0
  273. package/dist/types/IconPositionLeft.d.ts +5 -0
  274. package/dist/types/IconPositionRight.d.ts +5 -0
  275. package/dist/types/IconPositionTop.d.ts +5 -0
  276. package/dist/types/IdentityButtonsLayoutIcons.d.ts +5 -0
  277. package/dist/types/IdentityButtonsLayoutRow.d.ts +5 -0
  278. package/dist/types/IdentityButtonsLayoutStack.d.ts +5 -0
  279. package/dist/types/IdentityDividerLine.d.ts +5 -0
  280. package/dist/types/IdentityDividerText.d.ts +5 -0
  281. package/dist/types/MembersAreaLargeSize.d.ts +5 -0
  282. package/dist/types/MembersAreaMediumSize.d.ts +5 -0
  283. package/dist/types/MembersAreaSmallSize.d.ts +5 -0
  284. package/dist/types/MenuDividerDash.d.ts +5 -0
  285. package/dist/types/MenuDividerDots.d.ts +5 -0
  286. package/dist/types/MenuDividerLine.d.ts +5 -0
  287. package/dist/types/OnlineOrderBelowOrder.d.ts +5 -0
  288. package/dist/types/OnlineOrderCard.d.ts +5 -0
  289. package/dist/types/OnlineOrderImageRight.d.ts +5 -0
  290. package/dist/types/OnlineOrderOnImage.d.ts +5 -0
  291. package/dist/types/RestauransMenusCenter.d.ts +5 -0
  292. package/dist/types/RestauransMenusExpand.d.ts +5 -0
  293. package/dist/types/RestauransMenusSplitImageText.d.ts +5 -0
  294. package/dist/types/StoreCategoryMenuTypeVertical.d.ts +5 -0
  295. package/dist/types/StoreHeaderPositionMinimised.d.ts +5 -0
  296. package/dist/types/StoreHeaderPositionStretched.d.ts +5 -0
  297. package/dist/types/StoreImageBottom.d.ts +5 -0
  298. package/dist/types/StoreImageCard.d.ts +5 -0
  299. package/dist/types/StoreImagePlacementSide.d.ts +5 -0
  300. package/dist/types/StoreImagePlacementTop.d.ts +5 -0
  301. package/dist/types/StoreProductLayoutClassic.d.ts +5 -0
  302. package/dist/types/StoreRibonHorizontal.d.ts +5 -0
  303. package/dist/types/StoreRibonStack.d.ts +5 -0
  304. package/dist/types/animated/HeaderScrollEffectDisappear.d.ts +7 -0
  305. package/dist/types/animated/HeaderScrollEffectFadeOut.d.ts +7 -0
  306. package/dist/types/animated/HeaderScrollEffectMoveWithPage.d.ts +7 -0
  307. package/dist/types/animated/HeaderScrollEffectStayFixed.d.ts +7 -0
  308. package/dist/types/animated/LimitScaling2.d.ts +7 -0
  309. package/dist/types/animated/MaxMin.d.ts +7 -0
  310. package/dist/types/animated/MobileAlgoFast.d.ts +7 -0
  311. package/dist/types/animated/ResponsiveBehaviorElementsFixed.d.ts +7 -0
  312. package/dist/types/animated/ResponsiveBehaviorElementsRelativeWidth.d.ts +7 -0
  313. package/dist/types/animated/ResponsiveBehaviorElementsScaleProportionally.d.ts +7 -0
  314. package/dist/types/animated/ResponsiveBehaviorElementsStretch.d.ts +7 -0
  315. package/dist/types/animated/ResponsiveBehaviorHeaderFadeOut.d.ts +7 -0
  316. package/dist/types/animated/ResponsiveBehaviorHeaderFreeze.d.ts +7 -0
  317. package/dist/types/animated/ResponsiveBehaviorScaleProportionally.d.ts +7 -0
  318. package/dist/types/animated/ResponsiveBehaviorSectionFixedHeight.d.ts +7 -0
  319. package/dist/types/animated/ResponsiveBehaviorTextCustomScale.d.ts +7 -0
  320. package/dist/types/animated/ResponsiveBehaviorTextFixed.d.ts +7 -0
  321. package/dist/types/animated/ResponsiveBehaviorTextHug.d.ts +7 -0
  322. package/dist/types/animated/ResponsiveBehaviorTextScaleProportionally.d.ts +7 -0
  323. package/dist/types/animated/ResponsiveBehaviorWarp.d.ts +7 -0
  324. package/dist/types/animated/index.d.ts +40 -0
  325. package/dist/types/index.d.ts +43 -0
  326. package/package.json +3 -3
  327. package/src/AvatarCircle.svg +11 -11
  328. package/src/AvatarSquare.svg +11 -11
  329. package/src/BlogFullPost.svg +19 -19
  330. package/src/BlogOneColumn.svg +13 -13
  331. package/src/BlogTagButton.svg +17 -15
  332. package/src/BookingsGrid.svg +34 -34
  333. package/src/BookingsOverlapping.svg +43 -22
  334. package/src/BookingsSideBySide.svg +19 -19
  335. package/src/BookingsStrip.svg +1 -1
  336. package/src/ButtonsLayoutIconsIdentity.svg +42 -0
  337. package/src/ButtonsLayoutRowIdentity.svg +42 -0
  338. package/src/ButtonsLayoutStackIdentity.svg +42 -0
  339. package/src/DividerLineIdentity.svg +3 -0
  340. package/src/DividerLineTextIdentity.svg +23 -0
  341. package/src/EventLayoutAlternating.svg +14 -14
  342. package/src/EventLayoutLeft.svg +14 -14
  343. package/src/EventLayoutRight.svg +14 -14
  344. package/src/EventLeft.svg +30 -30
  345. package/src/EventRight.svg +30 -30
  346. package/src/EventsZoomIn.svg +53 -0
  347. package/src/FileShareFill.svg +30 -0
  348. package/src/FileShareLabel.svg +32 -0
  349. package/src/FileShareLine.svg +15 -0
  350. package/src/FormLayoutAboveIdentity.svg +63 -0
  351. package/src/FormLayoutBelowIdentity.svg +63 -0
  352. package/src/GalleryBlur.svg +21 -21
  353. package/src/GalleryColorIn.svg +19 -19
  354. package/src/GalleryExpand.svg +27 -27
  355. package/src/GalleryExpandOut.svg +27 -27
  356. package/src/GalleryFade.svg +15 -15
  357. package/src/GalleryFadeIn.svg +19 -19
  358. package/src/GalleryInvert.svg +14 -14
  359. package/src/GalleryMoveUp.svg +32 -27
  360. package/src/GalleryNoChange.svg +17 -17
  361. package/src/GalleryOneColor.svg +19 -19
  362. package/src/GalleryShrink.svg +29 -29
  363. package/src/GallerySlideDown.svg +20 -20
  364. package/src/GallerySlideRight.svg +20 -20
  365. package/src/GallerySlideUp.svg +26 -31
  366. package/src/GalleryZoomOut.svg +28 -33
  367. package/src/IconPositionBottom.svg +24 -0
  368. package/src/IconPositionLeft.svg +24 -0
  369. package/src/IconPositionRight.svg +24 -0
  370. package/src/IconPositionTop.svg +24 -0
  371. package/src/IdentityButtonsLayoutIcons.svg +42 -0
  372. package/src/IdentityButtonsLayoutRow.svg +42 -0
  373. package/src/IdentityButtonsLayoutStack.svg +42 -0
  374. package/src/IdentityDividerLine.svg +3 -0
  375. package/src/IdentityDividerText.svg +25 -0
  376. package/src/MembersAreaLargeSize.svg +23 -0
  377. package/src/MembersAreaMediumSize.svg +23 -0
  378. package/src/MembersAreaSmallSize.svg +23 -0
  379. package/src/MembersIcon.svg +15 -34
  380. package/src/MembersName.svg +9 -9
  381. package/src/MembersNameAndIcon.svg +16 -16
  382. package/src/MenuDividerDash.svg +3 -0
  383. package/src/MenuDividerDots.svg +10 -0
  384. package/src/MenuDividerLine.svg +3 -0
  385. package/src/OnlineOrderBelowOrder.svg +56 -0
  386. package/src/OnlineOrderCard.svg +62 -0
  387. package/src/OnlineOrderImageRight.svg +62 -0
  388. package/src/OnlineOrderOnImage.svg +56 -0
  389. package/src/PricingLayoutAbove.svg +31 -18
  390. package/src/PricingLayoutBelow.svg +26 -17
  391. package/src/PricingLayoutLeft.svg +37 -19
  392. package/src/PricingLayoutRight.svg +37 -19
  393. package/src/RestauransMenusCenter.svg +5 -0
  394. package/src/RestauransMenusExpand.svg +27 -0
  395. package/src/RestauransMenusSplitImageText.svg +26 -0
  396. package/src/RestaurantStrip.svg +7 -7
  397. package/src/StoreAboveInfo.svg +11 -11
  398. package/src/StoreAccordionCollapse.svg +30 -30
  399. package/src/StoreBelowInfo.svg +15 -15
  400. package/src/StoreButtons.svg +8 -8
  401. package/src/StoreCategoryMenuTypeVertical.svg +27 -0
  402. package/src/StoreCollapse.svg +12 -12
  403. package/src/StoreDrawer.svg +14 -14
  404. package/src/StoreDropdown.svg +11 -11
  405. package/src/StoreHeaderPositionMinimised.svg +69 -0
  406. package/src/StoreHeaderPositionStretched.svg +68 -0
  407. package/src/StoreImageBottom.svg +50 -0
  408. package/src/StoreImageCard.svg +60 -0
  409. package/src/StoreImagePlacementSide.svg +62 -0
  410. package/src/StoreImagePlacementTop.svg +62 -0
  411. package/src/StoreInline.svg +28 -17
  412. package/src/StoreNegativeBack.svg +11 -9
  413. package/src/StoreOnImage.svg +17 -22
  414. package/src/StorePopUp.svg +23 -23
  415. package/src/StorePriceSideBySide.svg +10 -10
  416. package/src/StorePriceStacked.svg +10 -10
  417. package/src/StoreProductInfo.svg +11 -11
  418. package/src/StoreProductLayoutClassic.svg +50 -0
  419. package/src/StoreRibonHorizontal.svg +25 -0
  420. package/src/StoreRibonStack.svg +26 -0
  421. package/src/StoreSideBySide.svg +10 -10
  422. package/src/StoreSleek.svg +15 -15
  423. package/src/StoreSpotlight.svg +30 -30
  424. package/src/StoreStreched.svg +30 -13
  425. package/src/StoreStunning.svg +16 -16
  426. package/src/StoreSwapImage.svg +27 -27
  427. package/src/StoreTrim.svg +20 -14
  428. package/src/StoreWrap.svg +13 -15
  429. package/src/animated/HeaderScrollEffectDisappear.html +265 -0
  430. package/src/animated/HeaderScrollEffectFadeOut.html +265 -0
  431. package/src/animated/HeaderScrollEffectMoveWithPage.html +222 -0
  432. package/src/animated/HeaderScrollEffectStayFixed.html +240 -0
  433. package/src/animated/LimitScaling2.html +556 -0
  434. package/src/animated/MaxMin.html +523 -0
  435. package/src/animated/MobileAlgoFast.html +711 -0
  436. package/src/animated/ResponsiveBehaviorElementsFixed.html +267 -0
  437. package/src/animated/ResponsiveBehaviorElementsRelativeWidth.html +332 -0
  438. package/src/animated/ResponsiveBehaviorElementsScaleProportionally.html +336 -0
  439. package/src/animated/ResponsiveBehaviorElementsStretch.html +1028 -0
  440. package/src/animated/ResponsiveBehaviorHeaderFadeOut.html +289 -0
  441. package/src/animated/ResponsiveBehaviorHeaderFreeze.html +290 -0
  442. package/src/animated/ResponsiveBehaviorScaleProportionally.html +445 -0
  443. package/src/animated/ResponsiveBehaviorSectionFixedHeight.html +318 -0
  444. package/src/animated/ResponsiveBehaviorTextCustomScale.html +320 -0
  445. package/src/animated/ResponsiveBehaviorTextFixed.html +189 -0
  446. package/src/animated/ResponsiveBehaviorTextHug.html +565 -0
  447. package/src/animated/ResponsiveBehaviorTextScaleProportionally.html +320 -0
  448. package/src/animated/ResponsiveBehaviorWarp.html +573 -0
package/src/animated/ResponsiveBehaviorElementsFixed.html ADDED
@@ -0,0 +1,267 @@
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: #303030;
14
+ --color-2: #002294;
15
+ --color-3: #B8C4FF;
16
+ --color-4: #F8F6F6;
17
+ --color-5: #EAEFFF;
18
+ }
19
+
20
+ .Frame-2147240028 {
21
+ transform-box: fill-box;
22
+ transform-origin: 50% 50%;
23
+ animation: Frame-2147240028-transform 3375ms linear infinite both;
24
+ }
25
+
26
+ @keyframes Frame-2147240028-transform {
27
+ 0% {
28
+ transform: scale(0.56, 0.56);
29
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
30
+ }
31
+ 49.392593% {
32
+ transform: scale(1, 1);
33
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
34
+ }
35
+ 98.755556% {
36
+ transform: scale(0.56, 0.56);
37
+ }
38
+ 100% {
39
+ transform: scale(0.56, 0.56);
40
+ }
41
+ }
42
+
43
+ .node-14-3 {
44
+ transform-box: fill-box;
45
+ transform-origin: 50% 50%;
46
+ animation: node-14-3-transform 3375ms linear infinite both;
47
+ }
48
+
49
+ @keyframes node-14-3-transform {
50
+ 0% {
51
+ transform: translate(37px, -0.081044px);
52
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
53
+ }
54
+ 49.382716% {
55
+ transform: translate(0px, -0.081044px);
56
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
57
+ }
58
+ 98.765432% {
59
+ transform: translate(37px, -0.081044px);
60
+ }
61
+ 100% {
62
+ transform: translate(37px, -0.081044px);
63
+ }
64
+ }
65
+
66
+ .node-15 {
67
+ transform-box: fill-box;
68
+ transform-origin: 50% 50%;
69
+ animation: node-15-transform 3375ms linear infinite both;
70
+ }
71
+
72
+ @keyframes node-15-transform {
73
+ 0% {
74
+ transform: translate(-37px, 0px);
75
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
76
+ }
77
+ 49.382716% {
78
+ transform: translate(0px, 0px);
79
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
80
+ }
81
+ 98.765432% {
82
+ transform: translate(-37px, 0px);
83
+ }
84
+ 100% {
85
+ transform: translate(-37px, 0px);
86
+ }
87
+ }
88
+
89
+ .node-3 {
90
+ transform-box: fill-box;
91
+ transform-origin: 50% 50%;
92
+ animation: node-3-transform 3375ms linear infinite both;
93
+ }
94
+
95
+ .node-3-shape {
96
+ animation: node-3-width 3375ms linear infinite both;
97
+ }
98
+
99
+ @keyframes node-3-transform {
100
+ 0% {
101
+ transform: translate(0px, 0px);
102
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
103
+ }
104
+ 49.392593% {
105
+ transform: translate(-37px, 0px);
106
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
107
+ }
108
+ 98.755556% {
109
+ transform: translate(0px, 0px);
110
+ }
111
+ 100% {
112
+ transform: translate(0px, 0px);
113
+ }
114
+ }
115
+
116
+ @keyframes node-3-width {
117
+ 0% {
118
+ width: 73px;
119
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
120
+ }
121
+ 49.392593% {
122
+ width: 147px;
123
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
124
+ }
125
+ 98.755556% {
126
+ width: 73px;
127
+ }
128
+ 100% {
129
+ width: 73px;
130
+ }
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
136
+ <defs>
137
+ <linearGradient id="paint0_linear_4125_12361" x1="110.482" y1="60.3398" x2="133.552" y2="78.8708" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
138
+ <linearGradient id="paint0_linear_4125_12403" x1="113.562" y1="61.7065" x2="126.645" y2="72.2151" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
139
+ <linearGradient id="paint1_linear_4125_12361" x1="95.2177" y1="37.3346" x2="140.84" y2="82.5369" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
140
+ <linearGradient id="paint1_linear_4125_12403" x1="104.902" y1="48.661" x2="130.774" y2="74.2946" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
141
+ <linearGradient id="paint2_linear_4125_12361" x1="113.012" y1="41.6462" x2="94.9412" y2="64.7056" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
142
+ <linearGradient id="paint2_linear_4125_12403" x1="114.992" y1="51.1105" x2="104.744" y2="64.1871" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
143
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4125_12361" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
144
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
145
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
146
+ <feGaussianBlur stdDeviation="1.01565" result="effect1_foregroundBlur_4125_12361"/>
147
+ </filter>
148
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4125_12361">
149
+ <rect x="44.5" y="23" width="147" height="81" rx="6" fill="white"/>
150
+ </clipPath>
151
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4125_12361">
152
+ <rect x="44.8125" y="23" width="147" height="81" rx="6" fill="white"/>
153
+ </clipPath>
154
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4125_12361">
155
+ <rect x="89.6719" y="42.668" width="57.2851" height="41.6619" rx="3.9058" fill="white"/>
156
+ </clipPath>
157
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_4125_12361">
158
+ <rect x="89.6719" y="42.668" width="57.2851" height="42.5019" rx="3.69581" fill="white"/>
159
+ </clipPath>
160
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip4_4125_12361">
161
+ <rect x="94.8828" y="47.875" width="11.7174" height="11.7174" rx="5.8587" fill="white"/>
162
+ </clipPath>
163
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4125_12403" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
164
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
165
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
166
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
167
+ <feOffset dx="1" dy="1"/>
168
+ <feGaussianBlur stdDeviation="1.5"/>
169
+ <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
170
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
171
+ <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4125_12403"/>
172
+ </filter>
173
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4125_12403" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
174
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
175
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
176
+ <feGaussianBlur stdDeviation="0.575959" result="effect1_foregroundBlur_4125_12403"/>
177
+ </filter>
178
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4125_12403">
179
+ <rect x="101.758" y="51.6875" width="32.4856" height="23.6259" rx="2.21493" fill="white"/>
180
+ </clipPath>
181
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4125_12403">
182
+ <rect x="101.758" y="51.6875" width="32.4856" height="24.1022" rx="2.09584" fill="white"/>
183
+ </clipPath>
184
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4125_12403">
185
+ <rect x="104.711" y="54.6406" width="6.64478" height="6.64478" rx="3.32239" fill="white"/>
186
+ </clipPath>
187
+ </defs>
188
+ <g fill="none">
189
+ <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-1)" />
190
+ <g fill="none">
191
+ <g fill="none">
192
+ <g fill="none" clip-path="url(#clip0_4125_12361)">
193
+ <g class="node-3">
194
+ <rect class="node-3-shape" x="81.5" y="23" width="73" height="81" rx="6" fill="var(--color-4)" fill-opacity="0.25" />
195
+ </g>
196
+ <g class="Frame-2147240028" fill="none">
197
+ <g fill="none" />
198
+ <g fill="none">
199
+ <g fill="none">
200
+ <g fill="none">
201
+ <g fill="none" clip-path="url(#clip1_4125_12361)">
202
+ <g fill="none">
203
+ <g fill="none">
204
+ <g fill="none">
205
+ <g fill="none" clip-path="url(#clip2_4125_12361)">
206
+ <g fill="none">
207
+ <g fill="none" clip-path="url(#clip3_4125_12361)">
208
+ <rect x="89.6719" y="42.668" width="57.2851" height="42.5019" rx="3.69581" fill="var(--color-5)" />
209
+ </g>
210
+ </g>
211
+ <g fill="none">
212
+ <g fill="none">
213
+ <path d="M119.091 51.7305L103.07 77.0863L131.643 72.9157L119.091 51.7305Z" fill="url(#paint0_linear_4125_12361)" />
214
+ <path d="M147.883 60.7829C147.883 60.7829 125.917 51.9748 124.845 51.5285C123.774 51.0823 117.127 49.0176 119.092 54.9706C121.045 60.8862 122.115 63.1612 122.541 64.1714C122.966 65.1815 124.699 69.2975 120.34 70.8162C115.398 72.5369 88.75 80.7082 88.75 80.7082V85.401H147.883V60.7829Z" fill="url(#paint1_linear_4125_12361)" />
215
+ </g>
216
+ <g fill="none">
217
+ <g fill="none" clip-path="url(#clip4_4125_12361)">
218
+ <rect x="94.8828" y="47.875" width="11.7174" height="11.7174" rx="5.8587" fill="var(--color-2)" />
219
+ <g fill="none" filter="url(#filter1_f_4125_12361)">
220
+ <path d="M103.526 39.9477C102.962 40.0598 102.405 40.2153 101.863 40.4142C99.6365 41.2387 97.6628 42.8081 96.3614 45.0176C93.3864 50.0622 95.042 56.5243 100.059 59.4498C105.077 62.3753 111.555 60.6539 114.53 55.6094C117.505 50.5612 115.849 44.0991 110.835 41.1772C108.543 39.8392 105.952 39.474 103.526 39.9477Z" fill="url(#paint2_linear_4125_12361)" />
221
+ </g>
222
+ </g>
223
+ </g>
224
+ </g>
225
+ </g>
226
+ </g>
227
+ </g>
228
+ </g>
229
+ </g>
230
+ </g>
231
+ </g>
232
+ </g>
233
+ </g>
234
+ </g>
235
+ </g>
236
+ </g>
237
+ </g>
238
+ <g display="none">
239
+ <g fill="none" filter="url(#filter0_i_4125_12403)">
240
+ <path d="M0 8C0 3.58172 3.58172 0 8 0H228C232.418 0 236 3.58172 236 8V119C236 123.418 232.418 127 228 127H8C3.58172 127 0 123.418 0 119V8Z" fill="var(--color-1)" />
241
+ <rect x="81.5" y="23" width="73" height="81" rx="6" fill="var(--color-4)" fill-opacity="0.25" />
242
+ <g fill="none" clip-path="url(#clip0_4125_12403)">
243
+ <g fill="none" clip-path="url(#clip1_4125_12403)">
244
+ <rect x="101.758" y="51.6875" width="32.4856" height="24.1022" rx="2.09584" fill="var(--color-5)" />
245
+ </g>
246
+ <path d="M118.444 56.8242L109.359 71.2032L125.563 68.8381L118.444 56.8242Z" fill="url(#paint0_linear_4125_12403)" />
247
+ <path d="M134.768 61.9583C134.768 61.9583 122.311 56.9633 121.704 56.7102C121.096 56.4571 117.327 55.2863 118.441 58.6621C119.548 62.0168 120.155 63.3069 120.396 63.8798C120.638 64.4526 121.62 66.7867 119.148 67.648C116.346 68.6238 101.234 73.2576 101.234 73.2576V75.9188H134.768V61.9583Z" fill="url(#paint1_linear_4125_12403)" />
248
+ <g fill="none" clip-path="url(#clip2_4125_12403)">
249
+ <rect x="104.711" y="54.6406" width="6.64478" height="6.64478" rx="3.32239" fill="var(--color-2)" />
250
+ <g fill="none" filter="url(#filter1_f_4125_12403)">
251
+ <path d="M109.612 50.1473C109.293 50.2108 108.977 50.299 108.669 50.4118C107.407 50.8794 106.287 51.7694 105.549 53.0223C103.862 55.883 104.801 59.5476 107.646 61.2066C110.492 62.8656 114.165 61.8895 115.852 59.0288C117.539 56.166 116.601 52.5015 113.757 50.8445C112.458 50.0857 110.988 49.8786 109.612 50.1473Z" fill="url(#paint2_linear_4125_12403)" />
252
+ </g>
253
+ </g>
254
+ </g>
255
+ <path d="M79 58.5H77V68.5H79V58.5Z" fill="var(--color-3)" />
256
+ <path d="M159 58.5H157V68.5H159V58.5Z" fill="var(--color-3)" />
257
+ </g>
258
+ </g>
259
+ <g class="node-15">
260
+ <path d="M 196.000011 67.918951 V 59.918951 C 196.000011 59.366651 195.552011 58.918951 195.000011 58.918951 C 194.447011 58.918951 194.000011 59.366651 194.000011 59.918951 V 67.918951 C 194.000011 68.471251 194.447011 68.918951 195.000011 68.918951 C 195.552011 68.918951 196.000011 68.471251 196.000011 67.918951 Z" fill="var(--color-3)" />
261
+ </g>
262
+ <g class="node-14-3">
263
+ <path d="M 41.999999 68.000003 V 60.000003 C 41.999999 59.447703 41.552299 59.000003 40.999999 59.000003 C 40.447799 59.000003 39.999999 59.447703 39.999999 60.000003 V 68.000003 C 39.999999 68.552303 40.447799 69.000003 40.999999 69.000003 C 41.552299 69.000003 41.999999 68.552303 41.999999 68.000003 Z" fill="var(--color-3)" />
264
+ </g>
265
+ </svg>
266
+ </body>
267
+ </html>
package/src/animated/ResponsiveBehaviorElementsRelativeWidth.html ADDED
@@ -0,0 +1,332 @@
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: #303030;
17
+ --color-5: #F8F6F6;
18
+ --color-6: #EAEFFF;
19
+ }
20
+
21
+ .group-mrw4nj39-4 {
22
+ transform-box: fill-box;
23
+ transform-origin: 50% 50%;
24
+ animation: group-mrw4nj39-4-transform 3375ms linear infinite both;
25
+ }
26
+
27
+ @keyframes group-mrw4nj39-4-transform {
28
+ 0% {
29
+ transform: scale(1, 1);
30
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
31
+ }
32
+ 49.392593% {
33
+ transform: scale(0.56, 1);
34
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
35
+ }
36
+ 98.755556% {
37
+ transform: scale(1, 1);
38
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
39
+ }
40
+ 100% {
41
+ transform: scale(1, 1);
42
+ }
43
+ }
44
+
45
+ .node-10-3 {
46
+ transform-box: fill-box;
47
+ transform-origin: 50% 50%;
48
+ animation: node-10-3-transform 3375ms linear infinite both;
49
+ }
50
+
51
+ @keyframes node-10-3-transform {
52
+ 0% {
53
+ transform: translate(0px, 0px);
54
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
55
+ }
56
+ 49.392593% {
57
+ transform: translate(9px, 0px);
58
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
59
+ }
60
+ 98.755556% {
61
+ transform: translate(0px, 0px);
62
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
63
+ }
64
+ 100% {
65
+ transform: translate(0px, 0px);
66
+ }
67
+ }
68
+
69
+ .node-14-3 {
70
+ transform-box: fill-box;
71
+ transform-origin: 50% 50%;
72
+ animation: node-14-3-transform 3375ms linear infinite both;
73
+ }
74
+
75
+ @keyframes node-14-3-transform {
76
+ 0% {
77
+ transform: translate(0px, 0px);
78
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
79
+ }
80
+ 49.392593% {
81
+ transform: translate(37px, 0px);
82
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
83
+ }
84
+ 98.755556% {
85
+ transform: translate(0px, 0px);
86
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
87
+ }
88
+ 100% {
89
+ transform: translate(0px, 0px);
90
+ }
91
+ }
92
+
93
+ .node-15 {
94
+ transform-box: fill-box;
95
+ transform-origin: 50% 50%;
96
+ animation: node-15-transform 3375ms linear infinite both;
97
+ }
98
+
99
+ @keyframes node-15-transform {
100
+ 0% {
101
+ transform: translate(0px, 0px);
102
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
103
+ }
104
+ 49.392593% {
105
+ transform: translate(-37px, 0px);
106
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
107
+ }
108
+ 98.755556% {
109
+ transform: translate(0px, 0px);
110
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
111
+ }
112
+ 100% {
113
+ transform: translate(0px, 0px);
114
+ }
115
+ }
116
+
117
+ .node-16 {
118
+ transform-box: fill-box;
119
+ transform-origin: 50% 50%;
120
+ animation: node-16-transform 3375ms linear infinite both;
121
+ }
122
+
123
+ .node-16-shape {
124
+ animation: node-16-width 3375ms linear infinite both;
125
+ }
126
+
127
+ @keyframes node-16-transform {
128
+ 0% {
129
+ transform: translate(-24px, 0px);
130
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
131
+ }
132
+ 49.392593% {
133
+ transform: translate(0px, 0px);
134
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
135
+ }
136
+ 98.755556% {
137
+ transform: translate(-24px, 0px);
138
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
139
+ }
140
+ 100% {
141
+ transform: translate(-24px, 0px);
142
+ }
143
+ }
144
+
145
+ @keyframes node-16-width {
146
+ 0% {
147
+ width: 100px;
148
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
149
+ }
150
+ 49.392593% {
151
+ width: 52px;
152
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
153
+ }
154
+ 98.755556% {
155
+ width: 100px;
156
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
157
+ }
158
+ 100% {
159
+ width: 100px;
160
+ }
161
+ }
162
+
163
+ .node-4-3 {
164
+ transform-box: fill-box;
165
+ transform-origin: 50% 50%;
166
+ animation: node-4-3-transform 3375ms linear infinite both;
167
+ }
168
+
169
+ .node-4-3-shape {
170
+ animation: node-4-3-width 3375ms linear infinite both;
171
+ }
172
+
173
+ @keyframes node-4-3-transform {
174
+ 0% {
175
+ transform: translate(-37px, 0px);
176
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
177
+ }
178
+ 49.392593% {
179
+ transform: translate(0px, 0px);
180
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
181
+ }
182
+ 98.755556% {
183
+ transform: translate(-37px, 0px);
184
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
185
+ }
186
+ 100% {
187
+ transform: translate(-37px, 0px);
188
+ }
189
+ }
190
+
191
+ @keyframes node-4-3-width {
192
+ 0% {
193
+ width: 147px;
194
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
195
+ }
196
+ 49.392593% {
197
+ width: 73px;
198
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
199
+ }
200
+ 98.755556% {
201
+ width: 147px;
202
+ animation-timing-function: cubic-bezier(0, 0, 1, 1);
203
+ }
204
+ 100% {
205
+ width: 147px;
206
+ }
207
+ }
208
+
209
+ .node-7-3-shape {
210
+ animation:
211
+ node-7-3-width 3375ms linear infinite both,
212
+ node-7-3-height 3375ms linear infinite both;
213
+ }
214
+
215
+ @keyframes node-7-3-width {
216
+ 0% {
217
+ width: 100px;
218
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
219
+ }
220
+ 100% {
221
+ width: 100px;
222
+ }
223
+ }
224
+
225
+ @keyframes node-7-3-height {
226
+ 0% {
227
+ height: 58px;
228
+ animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
229
+ }
230
+ 100% {
231
+ height: 58px;
232
+ }
233
+ }
234
+ </style>
235
+ </head>
236
+ <body>
237
+ <svg xmlns="http://www.w3.org/2000/svg" width="236" height="127" viewBox="0 0 236 127" fill="none">
238
+ <defs>
239
+ <linearGradient id="paint0_linear_16_18" x1="104.586" y1="59.1065" x2="137.096" y2="91.7971" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.325264" stop-color="#B8C4FF" /><stop offset="1" stop-color="#002294" /></linearGradient>
240
+ <linearGradient id="paint1_linear_16_18" x1="78.2891" y1="27.4515" x2="139.642" y2="103.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#EAEFFF" /><stop offset="0.5" stop-color="#B8C4FF" /><stop offset="0.95" stop-color="#002294" /></linearGradient>
241
+ <linearGradient id="paint2_linear_16_18" x1="111.677" y1="34.4475" x2="87.1605" y2="65.7319" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.576923" stop-color="#B8C4FF" /><stop offset="0.85" stop-color="#002294" /></linearGradient>
242
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_16_18" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
243
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
244
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
245
+ <feGaussianBlur stdDeviation="1.37792" result="effect1_foregroundBlur_16_18"/>
246
+ </filter>
247
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_16_18">
248
+ <rect x="44.2646" y="22.9559" width="147" height="81" rx="6" fill="white"/>
249
+ </clipPath>
250
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_16_18">
251
+ <rect x="44.5781" y="22.9559" width="147" height="81" rx="6" fill="white"/>
252
+ </clipPath>
253
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_16_18">
254
+ <rect x="68.2969" y="34.39" width="100" height="58" rx="4" fill="white"/>
255
+ </clipPath>
256
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_16_18">
257
+ <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="white"/>
258
+ </clipPath>
259
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_16_18" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
260
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
261
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
262
+ <feGaussianBlur stdDeviation="1.37792" result="effect1_foregroundBlur_16_18"/>
263
+ </filter>
264
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_16_18">
265
+ <rect x="44.2646" y="22.9559" width="147" height="81" rx="6" fill="white"/>
266
+ </clipPath>
267
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_16_18">
268
+ <rect x="44.5781" y="22.9559" width="147" height="81" rx="6" fill="white"/>
269
+ </clipPath>
270
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_16_18">
271
+ <rect x="68.2969" y="34.39" width="100" height="58" rx="4" fill="white"/>
272
+ </clipPath>
273
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_16_18">
274
+ <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="white"/>
275
+ </clipPath>
276
+ <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_16_18" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
277
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
278
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
279
+ <feGaussianBlur stdDeviation="1.37792" result="effect1_foregroundBlur_16_18"/>
280
+ </filter>
281
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_16_18">
282
+ <rect x="44.2646" y="22.9559" width="147" height="81" rx="6" fill="white"/>
283
+ </clipPath>
284
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_16_18">
285
+ <rect x="44.5781" y="22.9559" width="147" height="81" rx="6" fill="white"/>
286
+ </clipPath>
287
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_16_18">
288
+ <rect x="68.2969" y="34.39" width="100" height="58" rx="4" fill="white"/>
289
+ </clipPath>
290
+ <clipPath xmlns="http://www.w3.org/2000/svg" id="clip3_16_18">
291
+ <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="white"/>
292
+ </clipPath>
293
+ <mask id="am-node-16" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="236" height="127"><g class="node-16"> <rect class="node-16-shape" x="92.2969" y="34.3901" width="52" height="58" rx="4" fill="var(--color-3)" /></g></mask>
294
+ </defs>
295
+ <g>
296
+ <g fill="none">
297
+ <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-4)" />
298
+ <g fill="none" clip-path="url(#clip0_16_18)">
299
+ <g class="node-4-3">
300
+ <rect class="node-4-3-shape" x="81.2646" y="22.9559" width="73" height="81" rx="6" fill="var(--color-5)" fill-opacity="0.25" />
301
+ </g>
302
+ <g mask="url(#am-node-16)">
303
+ <g fill="none" clip-path="url(#clip1_16_18)">
304
+ <g fill="none" clip-path="url(#clip2_16_18)">
305
+ <g>
306
+ <rect class="node-7-3-shape" x="68.2969" y="34.39" width="100" height="58" fill="var(--color-6)" />
307
+ </g>
308
+ <g class="group-mrw4nj39-4">
309
+ <path d="M119.417 47.2596L91.8188 82.1505L141.04 76.4115L119.417 47.2596Z" fill="url(#paint0_linear_16_18)" />
310
+ <path d="M169.012 59.7176C169.012 59.7176 131.172 47.5971 129.327 46.983C127.481 46.369 116.031 43.5279 119.416 51.7194C122.78 59.8597 124.623 62.9902 125.356 64.3802C126.089 65.7703 129.074 71.4339 121.565 73.5239C113.053 75.8916 67.1477 87.1357 67.1477 87.1357V93.5932H169.012V59.7176Z" fill="url(#paint1_linear_16_18)" />
311
+ </g>
312
+ <g class="node-10-3" fill="none" clip-path="url(#clip3_16_18)">
313
+ <rect x="87.0811" y="41.9574" width="15.8969" height="16.1237" rx="7.94845" fill="var(--color-1)" />
314
+ <g fill="none" filter="url(#filter1_f_16_18)">
315
+ <path d="M98.8074 32.1431C98.0424 32.2952 97.2871 32.5062 96.5515 32.776C93.5305 33.8946 90.8528 36.0238 89.0873 39.0214C85.0512 45.8653 87.2973 54.6324 94.1043 58.6014C100.911 62.5704 109.7 60.2351 113.736 53.3912C117.772 46.5424 115.526 37.7753 108.724 33.8112C105.614 31.996 102.098 31.5005 98.8074 32.1431Z" fill="url(#paint2_linear_16_18)" />
316
+ </g>
317
+ </g>
318
+ </g>
319
+ </g>
320
+ </g>
321
+ </g>
322
+ <g class="node-14-3">
323
+ <path d="M41.7646 67.4559V59.4559C41.7646 58.9036 41.3169 58.4559 40.7646 58.4559C40.2124 58.4559 39.7646 58.9036 39.7646 59.4559V67.4559C39.7646 68.0082 40.2124 68.4559 40.7646 68.4559C41.3169 68.4559 41.7646 68.0082 41.7646 67.4559Z" fill="var(--color-2)" />
324
+ </g>
325
+ <g class="node-15">
326
+ <path d="M195.765 67.4559V59.4559C195.765 58.9036 195.317 58.4559 194.765 58.4559C194.212 58.4559 193.765 58.9036 193.765 59.4559V67.4559C193.765 68.0082 194.212 68.4559 194.765 68.4559C195.317 68.4559 195.765 68.0082 195.765 67.4559Z" fill="var(--color-2)" />
327
+ </g>
328
+ </g>
329
+ </g>
330
+ </svg>
331
+ </body>
332
+ </html>