@wix/design-system-illustrations 2.43.0 → 2.44.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 (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/ThumbnailSideBySide.html DELETED
@@ -1,160 +0,0 @@
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: #7896FF;
14
- --color-2: #002294;
15
- --color-3: #F8F6F6;
16
- }
17
-
18
- .group-mtr8nkm4-1 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: group-mtr8nkm4-1-transform 2375ms linear infinite both;
22
- }
23
-
24
- @keyframes group-mtr8nkm4-1-transform {
25
- 0% {
26
- transform: translate(0px, 30px);
27
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
- }
29
- 26.315789% {
30
- transform: translate(0px, 0px);
31
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
- }
33
- 100% {
34
- transform: translate(0px, 0px);
35
- }
36
- }
37
-
38
- .group-mtr8o0p7-2 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: group-mtr8o0p7-2-transform 2375ms linear infinite both;
42
- }
43
-
44
- @keyframes group-mtr8o0p7-2-transform {
45
- 0% {
46
- transform: translate(0px, 51.778772px);
47
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
- }
49
- 33.347368% {
50
- transform: translate(0px, 0px);
51
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
- }
53
- 100% {
54
- transform: translate(0px, 0px);
55
- }
56
- }
57
-
58
- .group-mtr8obho-3 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: group-mtr8obho-3-transform 2375ms linear infinite both;
62
- }
63
-
64
- @keyframes group-mtr8obho-3-transform {
65
- 0% {
66
- transform: translate(0px, 57.591696px);
67
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
- }
69
- 40.336842% {
70
- transform: translate(0px, 0px);
71
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
- }
73
- 100% {
74
- transform: translate(0px, 0px);
75
- }
76
- }
77
- </style>
78
- </head>
79
- <body>
80
- <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
81
- <defs>
82
- <linearGradient id="paint0_linear_4424_19222" x1="76.7997" y1="28.9776" x2="37.7492" y2="91.7501" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
83
- <linearGradient id="paint1_linear_4424_19222" x1="98.5184" y1="28.9776" x2="59.4679" y2="91.7501" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
84
- <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4424_19222" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
85
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
86
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
87
- <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"/>
88
- <feOffset dx="1" dy="1"/>
89
- <feGaussianBlur stdDeviation="1.5"/>
90
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
91
- <feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0"/>
92
- <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4424_19222"/>
93
- </filter>
94
- <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4424_19222" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
95
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
96
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
97
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4424_19222"/>
98
- </filter>
99
- <filter xmlns="http://www.w3.org/2000/svg" id="filter2_f_4424_19222" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
100
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
101
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
102
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4424_19222"/>
103
- </filter>
104
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4424_19222">
105
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="white"/>
106
- </clipPath>
107
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4424_19222">
108
- <rect x="33.2578" y="32.9062" width="21.8713" height="20.0353" rx="2.83333" transform="rotate(90 33.2578 32.9062)" fill="white"/>
109
- </clipPath>
110
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4424_19222">
111
- <rect x="54.7734" y="32.9062" width="21.8713" height="20.0353" rx="2.83333" transform="rotate(90 54.7734 32.9062)" fill="white"/>
112
- </clipPath>
113
- </defs>
114
- <g fill="none" filter="url(#filter0_i_4424_19222)">
115
- <g fill="none">
116
- <g fill="none" clip-path="url(#clip0_4424_19222)">
117
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-3)" />
118
- <g fill="none">
119
- <rect x="0" y="0" width="68" height="68" rx="3.77778" fill="var(--color-3)" />
120
- <g class="group-mtr8nkm4-1">
121
- <g fill="none">
122
- <path d="M 54.7734 16.05213 L 54.7734 32.25677 A 2.83333 2.83333 45 0 1 51.94007 35.0901 L 37.57143 35.0901 A 2.83333 2.83333 45 0 1 34.7381 32.25677 L 34.7381 16.05213 A 2.83333 2.83333 45 0 1 37.57143 13.2188 L 51.94007 13.2188 A 2.83333 2.83333 45 0 1 54.7734 16.05213 Z" fill="var(--color-2)" />
123
- </g>
124
- <g fill="none">
125
- <path d="M 33.2578 16.05213 L 33.2578 32.25677 A 2.83333 2.83333 45 0 1 30.42447 35.0901 L 16.05583 35.0901 A 2.83333 2.83333 45 0 1 13.2225 32.25677 L 13.2225 16.05213 A 2.83333 2.83333 45 0 1 16.05583 13.2188 L 30.42447 13.2188 A 2.83333 2.83333 45 0 1 33.2578 16.05213 Z" fill="var(--color-2)" />
126
- </g>
127
- </g>
128
- <g class="group-mtr8o0p7-2">
129
- <g fill="none">
130
- <path d="M 33.2578 25.89583 L 33.2578 42.10047 A 2.83333 2.83333 45 0 1 30.42447 44.9338 L 16.05583 44.9338 A 2.83333 2.83333 45 0 1 13.2225 42.10047 L 13.2225 25.89583 A 2.83333 2.83333 45 0 1 16.05583 23.0625 L 30.42447 23.0625 A 2.83333 2.83333 45 0 1 33.2578 25.89583 Z" fill="var(--color-1)" />
131
- </g>
132
- <g fill="none">
133
- <path d="M 54.7734 25.89583 L 54.7734 42.10047 A 2.83333 2.83333 45 0 1 51.94007 44.9338 L 37.57143 44.9338 A 2.83333 2.83333 45 0 1 34.7381 42.10047 L 34.7381 25.89583 A 2.83333 2.83333 45 0 1 37.57143 23.0625 L 51.94007 23.0625 A 2.83333 2.83333 45 0 1 54.7734 25.89583 Z" fill="var(--color-1)" />
134
- </g>
135
- </g>
136
- <g class="group-mtr8obho-3">
137
- <g fill="none">
138
- <g fill="none" clip-path="url(#clip1_4424_19222)">
139
- <path d="M 33.2578 35.73953 L 33.2578 51.94417 A 2.83333 2.83333 45 0 1 30.42447 54.7775 L 16.05583 54.7775 A 2.83333 2.83333 45 0 1 13.2225 51.94417 L 13.2225 35.73953 A 2.83333 2.83333 45 0 1 16.05583 32.9062 L 30.42447 32.9062 A 2.83333 2.83333 45 0 1 33.2578 35.73953 Z" fill="var(--color-2)" />
140
- <g fill="none" filter="url(#filter1_f_4424_19222)">
141
- <path d="M83.9297 62.2109L83.9297 23.4853L4.49536 23.4853L4.49536 62.2109L83.9297 62.2109Z" fill="url(#paint0_linear_4424_19222)" />
142
- </g>
143
- </g>
144
- </g>
145
- <g fill="none">
146
- <g fill="none" clip-path="url(#clip2_4424_19222)">
147
- <path d="M 54.7734 35.73953 L 54.7734 51.94417 A 2.83333 2.83333 45 0 1 51.94007 54.7775 L 37.57143 54.7775 A 2.83333 2.83333 45 0 1 34.7381 51.94417 L 34.7381 35.73953 A 2.83333 2.83333 45 0 1 37.57143 32.9062 L 51.94007 32.9062 A 2.83333 2.83333 45 0 1 54.7734 35.73953 Z" fill="var(--color-2)" />
148
- <g fill="none" filter="url(#filter2_f_4424_19222)">
149
- <path d="M105.648 62.2109L105.648 23.4853L26.2141 23.4853L26.2141 62.2109L105.648 62.2109Z" fill="url(#paint1_linear_4424_19222)" />
150
- </g>
151
- </g>
152
- </g>
153
- </g>
154
- </g>
155
- </g>
156
- </g>
157
- </g>
158
- </svg>
159
- </body>
160
- </html>
package/src/animated/ThumbnailSplit.html DELETED
@@ -1,139 +0,0 @@
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: #F8F6F6;
14
- --color-2: #002294;
15
- --color-3: #7896FF;
16
- }
17
-
18
- .Frame-1707483277 {
19
- transform-box: fill-box;
20
- transform-origin: 50% 50%;
21
- animation: Frame-1707483277-transform 2375ms linear infinite both;
22
- }
23
-
24
- @keyframes Frame-1707483277-transform {
25
- 0% {
26
- transform: translate(0px, 57.377876px);
27
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
28
- }
29
- 38.568421% {
30
- transform: translate(0px, 0px);
31
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
- }
33
- 100% {
34
- transform: translate(0px, 0px);
35
- }
36
- }
37
-
38
- .Frame-1707483278 {
39
- transform-box: fill-box;
40
- transform-origin: 50% 50%;
41
- animation: Frame-1707483278-transform 2375ms linear infinite both;
42
- }
43
-
44
- @keyframes Frame-1707483278-transform {
45
- 0% {
46
- transform: translate(0px, 50.823251px);
47
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
48
- }
49
- 31.578947% {
50
- transform: translate(0px, 0px);
51
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
52
- }
53
- 100% {
54
- transform: translate(0px, 0px);
55
- }
56
- }
57
-
58
- .Frame-1707483281 {
59
- transform-box: fill-box;
60
- transform-origin: 50% 50%;
61
- animation: Frame-1707483281-transform 2375ms linear infinite both;
62
- }
63
-
64
- @keyframes Frame-1707483281-transform {
65
- 0% {
66
- transform: translate(0px, 24.979506px);
67
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
- }
69
- 24.561403% {
70
- transform: translate(0px, 0px);
71
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
- }
73
- 100% {
74
- transform: translate(0px, 0px);
75
- }
76
- }
77
- </style>
78
- </head>
79
- <body>
80
- <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
81
- <defs>
82
- <linearGradient id="paint0_linear_4428_19363" x1="97.8231" y1="29.0557" x2="58.7726" y2="91.8283" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
83
- <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4428_19363" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
84
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
85
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
86
- <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"/>
87
- <feOffset dx="0.944444" dy="0.944444"/>
88
- <feGaussianBlur stdDeviation="1.41667"/>
89
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
90
- <feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0"/>
91
- <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4428_19363"/>
92
- </filter>
93
- <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4428_19363" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
94
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
95
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
96
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4428_19363"/>
97
- </filter>
98
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4428_19363">
99
- <rect x="55" y="33" width="22" height="21" rx="2.83333" transform="rotate(90 55 33)" fill="white"/>
100
- </clipPath>
101
- <mask id="am-node-1-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
102
- <mask id="am-node-1-2-2-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
103
- <mask id="am-node-1-2" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="68" height="68"><rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" /></mask>
104
- </defs>
105
- <g fill="none" filter="url(#filter0_i_4428_19363)">
106
- <rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" />
107
- <g fill="none">
108
- <g fill="none" opacity="0.25">
109
- <g fill="none">
110
- <rect x="13" y="13" width="42" height="42" rx="2.83333" fill="var(--color-2)" />
111
- </g>
112
- </g>
113
- <g fill="none">
114
- <g mask="url(#am-node-1-2-2)">
115
- <g class="Frame-1707483281" fill="none">
116
- <path style="transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0px, 0px)" d="M 55 15.83333 L 55 32.16667 A 2.83333 2.83333 45 0 1 52.16667 35 L 36.83333 35 A 2.83333 2.83333 45 0 1 34 32.16667 L 34 15.83333 A 2.83333 2.83333 45 0 1 36.83333 13 L 52.16667 13 A 2.83333 2.83333 45 0 1 55 15.83333 Z" fill="var(--color-2)" />
117
- </g>
118
- </g>
119
- <g mask="url(#am-node-1-2-2-2)">
120
- <g class="Frame-1707483278" fill="none">
121
- <path d="M 55 25.83333 L 55 42.16667 A 2.83333 2.83333 45 0 1 52.16667 45 L 36.83333 45 A 2.83333 2.83333 45 0 1 34 42.16667 L 34 25.83333 A 2.83333 2.83333 45 0 1 36.83333 23 L 52.16667 23 A 2.83333 2.83333 45 0 1 55 25.83333 Z" fill="var(--color-3)" />
122
- </g>
123
- </g>
124
- <g mask="url(#am-node-1-2)">
125
- <g class="Frame-1707483277" fill="none">
126
- <g fill="none" clip-path="url(#clip0_4428_19363)">
127
- <path d="M 55 35.83333 L 55 52.16667 A 2.83333 2.83333 45 0 1 52.16667 55 L 36.83333 55 A 2.83333 2.83333 45 0 1 34 52.16667 L 34 35.83333 A 2.83333 2.83333 45 0 1 36.83333 33 L 52.16667 33 A 2.83333 2.83333 45 0 1 55 35.83333 Z" fill="var(--color-2)" />
128
- <g fill="none" filter="url(#filter1_f_4428_19363)">
129
- <path d="M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z" fill="url(#paint0_linear_4428_19363)" />
130
- </g>
131
- </g>
132
- </g>
133
- </g>
134
- </g>
135
- </g>
136
- </g>
137
- </svg>
138
- </body>
139
- </html>
package/src/animated/ThumbnailZigzag.html DELETED
@@ -1,162 +0,0 @@
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: #F8F6F6;
14
- --color-2: #002294;
15
- --color-3: #D5DFFF;
16
- --color-4: #7896FF;
17
- }
18
-
19
- .Frame-1707483282 {
20
- transform-box: fill-box;
21
- transform-origin: 50% 50%;
22
- animation: Frame-1707483282-transform 2375ms linear infinite both;
23
- }
24
-
25
- @keyframes Frame-1707483282-transform {
26
- 0% {
27
- transform: translate(0px, 59.807137px);
28
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
29
- }
30
- 64.884211% {
31
- transform: translate(0px, 0px);
32
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
33
- }
34
- 100% {
35
- transform: translate(0px, 0px);
36
- }
37
- }
38
-
39
- .Frame-1707483283 {
40
- transform-box: fill-box;
41
- transform-origin: 50% 50%;
42
- animation: Frame-1707483283-transform 2375ms linear infinite both;
43
- }
44
-
45
- @keyframes Frame-1707483283-transform {
46
- 0% {
47
- transform: translate(0px, 51.14881px);
48
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
49
- }
50
- 43.859649% {
51
- transform: translate(0px, 0px);
52
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
53
- }
54
- 100% {
55
- transform: translate(0px, 0px);
56
- }
57
- }
58
-
59
- .Frame-1707483284 {
60
- transform-box: fill-box;
61
- transform-origin: 50% 50%;
62
- animation: Frame-1707483284-transform 2375ms linear infinite both;
63
- }
64
-
65
- @keyframes Frame-1707483284-transform {
66
- 0% {
67
- transform: translate(0px, 58.777289px);
68
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
69
- }
70
- 57.852632% {
71
- transform: translate(0px, 0px);
72
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
73
- }
74
- 100% {
75
- transform: translate(0px, 0px);
76
- }
77
- }
78
-
79
- .Frame-1707483285 {
80
- transform-box: fill-box;
81
- transform-origin: 50% 50%;
82
- animation: Frame-1707483285-transform 2375ms linear infinite both;
83
- }
84
-
85
- @keyframes Frame-1707483285-transform {
86
- 0% {
87
- transform: translate(0px, 56.367048px);
88
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
89
- }
90
- 50.863158% {
91
- transform: translate(0px, 0px);
92
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
93
- }
94
- 100% {
95
- transform: translate(0px, 0px);
96
- }
97
- }
98
- </style>
99
- </head>
100
- <body>
101
- <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68" fill="none">
102
- <defs>
103
- <linearGradient id="paint0_linear_4424_19163" x1="113.06" y1="9.65327" x2="47.0261" y2="92.6155" gradientUnits="userSpaceOnUse"><stop offset="0.176006" stop-color="#EAEFFF" /><stop offset="0.55" stop-color="#B8C4FF" /><stop offset="0.8" stop-color="#002294" /></linearGradient>
104
- <filter xmlns="http://www.w3.org/2000/svg" id="filter0_i_4424_19163" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
105
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
106
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
107
- <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"/>
108
- <feOffset dx="1" dy="1"/>
109
- <feGaussianBlur stdDeviation="1.5"/>
110
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
111
- <feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.458824 0 0 0 0 0.454902 0 0 0 0.2 0"/>
112
- <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4424_19163"/>
113
- </filter>
114
- <filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4424_19163" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1" y="-1" width="3" height="3">
115
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
116
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
117
- <feGaussianBlur stdDeviation="2.36111" result="effect1_foregroundBlur_4424_19163"/>
118
- </filter>
119
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4424_19163">
120
- <rect width="68" height="68" fill="white"/>
121
- </clipPath>
122
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4424_19163">
123
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="white"/>
124
- </clipPath>
125
- <clipPath xmlns="http://www.w3.org/2000/svg" id="clip2_4424_19163">
126
- <rect x="54.7812" y="32.1719" width="23.6111" height="20.7778" rx="2.83333" transform="rotate(90 54.7812 32.1719)" fill="white"/>
127
- </clipPath>
128
- </defs>
129
- <g fill="none" filter="url(#filter0_i_4424_19163)">
130
- <g fill="none" clip-path="url(#clip0_4424_19163)">
131
- <g fill="none">
132
- <g fill="none" clip-path="url(#clip1_4424_19163)">
133
- <path d="M0 7.55556C0 3.38274 3.38274 0 7.55556 0H60.4444C64.6173 0 68 3.38274 68 7.55556V60.4444C68 64.6173 64.6173 68 60.4444 68H7.55556C3.38274 68 0 64.6173 0 60.4444V7.55556Z" fill="var(--color-1)" />
134
- <g fill="none">
135
- <rect x="0" y="0" width="68" height="68" rx="3.77778" fill="var(--color-1)" />
136
- </g>
137
- </g>
138
- </g>
139
- <g fill="none">
140
- <g class="Frame-1707483283" fill="none">
141
- <path d="M 34 16.05993 L 34 34.00437 A 2.83333 2.83333 45 0 1 31.16667 36.8377 L 16.05553 36.8377 A 2.83333 2.83333 45 0 1 13.2222 34.00437 L 13.2222 16.05993 A 2.83333 2.83333 45 0 1 16.05553 13.2266 L 31.16667 13.2266 A 2.83333 2.83333 45 0 1 34 16.05993 Z" fill="var(--color-2)" />
142
- </g>
143
- <g class="Frame-1707483285" fill="none">
144
- <path d="M 54.7812 21.72393 L 54.7812 39.66837 A 2.83333 2.83333 45 0 1 51.94787 42.5017 L 36.83673 42.5017 A 2.83333 2.83333 45 0 1 34.0034 39.66837 L 34.0034 21.72393 A 2.83333 2.83333 45 0 1 36.83673 18.8906 L 51.94787 18.8906 A 2.83333 2.83333 45 0 1 54.7812 21.72393 Z" fill="var(--color-3)" />
145
- </g>
146
- <g class="Frame-1707483284" fill="none">
147
- <path d="M 34 29.27863 L 34 47.22307 A 2.83333 2.83333 45 0 1 31.16667 50.0564 L 16.05553 50.0564 A 2.83333 2.83333 45 0 1 13.2222 47.22307 L 13.2222 29.27863 A 2.83333 2.83333 45 0 1 16.05553 26.4453 L 31.16667 26.4453 A 2.83333 2.83333 45 0 1 34 29.27863 Z" fill="var(--color-4)" />
148
- </g>
149
- <g class="Frame-1707483282" fill="none">
150
- <g fill="none" clip-path="url(#clip2_4424_19163)">
151
- <path d="M 54.7812 35.00523 L 54.7812 52.94967 A 2.83333 2.83333 45 0 1 51.94787 55.783 L 36.83673 55.783 A 2.83333 2.83333 45 0 1 34.0034 52.94967 L 34.0034 35.00523 A 2.83333 2.83333 45 0 1 36.83673 32.1719 L 51.94787 32.1719 A 2.83333 2.83333 45 0 1 54.7812 35.00523 Z" fill="var(--color-2)" />
152
- <g fill="none" filter="url(#filter1_f_4424_19163)">
153
- <path d="M121.734 61.3828L121.734 1.10425L25.0979 1.10425L25.0979 61.3828L121.734 61.3828Z" fill="url(#paint0_linear_4424_19163)" />
154
- </g>
155
- </g>
156
- </g>
157
- </g>
158
- </g>
159
- </g>
160
- </svg>
161
- </body>
162
- </html>