@wix/design-system-illustrations 2.38.3 → 2.39.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.
- package/dist/cjs/animated/ThumbnailFullWidth.js +88 -0
- package/dist/cjs/animated/ThumbnailGrid.js +88 -0
- package/dist/cjs/animated/ThumbnailSideBySide.js +88 -0
- package/dist/cjs/animated/ThumbnailSplit.js +88 -0
- package/dist/cjs/animated/ThumbnailZigzag.js +88 -0
- package/dist/cjs/animated/animated.global.css +391 -0
- package/dist/cjs/animated/index.js +17 -2
- package/dist/esm/animated/ThumbnailFullWidth.js +44 -0
- package/dist/esm/animated/ThumbnailGrid.js +44 -0
- package/dist/esm/animated/ThumbnailSideBySide.js +44 -0
- package/dist/esm/animated/ThumbnailSplit.js +44 -0
- package/dist/esm/animated/ThumbnailZigzag.js +44 -0
- package/dist/esm/animated/animated.global.css +391 -0
- package/dist/esm/animated/index.js +11 -1
- package/dist/types/animated/ThumbnailFullWidth.d.ts +7 -0
- package/dist/types/animated/ThumbnailGrid.d.ts +7 -0
- package/dist/types/animated/ThumbnailSideBySide.d.ts +7 -0
- package/dist/types/animated/ThumbnailSplit.d.ts +7 -0
- package/dist/types/animated/ThumbnailZigzag.d.ts +7 -0
- package/dist/types/animated/index.d.ts +10 -0
- package/package.json +3 -3
- package/src/animated/ThumbnailFullWidth.html +133 -0
- package/src/animated/ThumbnailGrid.html +134 -0
- package/src/animated/ThumbnailSideBySide.html +160 -0
- package/src/animated/ThumbnailSplit.html +139 -0
- package/src/animated/ThumbnailZigzag.html +162 -0
|
@@ -0,0 +1,162 @@
|
|
|
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>
|