@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.
- package/dist/cjs/MaxWidth.js +1 -2
- package/dist/cjs/animated/ElementPositionDefault.js +90 -0
- package/dist/cjs/animated/ElementPositionPinned.js +91 -0
- package/dist/cjs/animated/ElementPositionSticky.js +91 -0
- package/dist/cjs/animated/ResponsiveBehaviorHeaderDisappear.js +90 -0
- package/dist/cjs/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +10 -9
- package/dist/cjs/animated/StickySectionPresetsGridRows.js +89 -0
- package/dist/cjs/animated/{ThumbnailGridTransparent.js → StickySectionPresetsSideBySide.js} +10 -9
- package/dist/cjs/animated/StickySectionPresetsSplit.js +89 -0
- package/dist/cjs/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +10 -9
- package/dist/cjs/animated/animated.global.css +696 -477
- package/dist/cjs/animated/index.js +27 -30
- package/dist/esm/MaxWidth.js +1 -2
- package/dist/esm/animated/ElementPositionDefault.js +46 -0
- package/dist/esm/animated/ElementPositionPinned.js +47 -0
- package/dist/esm/animated/ElementPositionSticky.js +47 -0
- package/dist/esm/animated/ResponsiveBehaviorHeaderDisappear.js +46 -0
- package/dist/esm/animated/{ThumbnailFullWidthTransparent.js → StickySectionPresetsFullWidth.js} +6 -5
- package/dist/esm/animated/StickySectionPresetsGridRows.js +45 -0
- package/dist/esm/animated/StickySectionPresetsSideBySide.js +45 -0
- package/dist/esm/animated/StickySectionPresetsSplit.js +45 -0
- package/dist/esm/animated/{ThumbnailZigzagTransparent.js → StickySectionPresetsZigzag.js} +6 -5
- package/dist/esm/animated/animated.global.css +696 -477
- package/dist/esm/animated/index.js +18 -20
- package/dist/types/animated/ElementPositionDefault.d.ts +7 -0
- package/dist/types/animated/ElementPositionPinned.d.ts +7 -0
- package/dist/types/animated/ElementPositionSticky.d.ts +7 -0
- package/dist/types/animated/ResponsiveBehaviorHeaderDisappear.d.ts +7 -0
- package/dist/types/animated/StickySectionPresetsFullWidth.d.ts +7 -0
- package/dist/types/animated/StickySectionPresetsGridRows.d.ts +7 -0
- package/dist/types/animated/StickySectionPresetsSideBySide.d.ts +7 -0
- package/dist/types/animated/StickySectionPresetsSplit.d.ts +7 -0
- package/dist/types/animated/StickySectionPresetsZigzag.d.ts +7 -0
- package/dist/types/animated/index.d.ts +18 -20
- package/package.json +3 -3
- package/src/MaxWidth.svg +1 -1
- package/src/animated/ElementPositionDefault.html +223 -0
- package/src/animated/ElementPositionPinned.html +223 -0
- package/src/animated/ElementPositionSticky.html +342 -0
- package/src/animated/ResponsiveBehaviorHeaderDisappear.html +336 -0
- package/src/animated/{ThumbnailFullWidthTransparent.html → StickySectionPresetsFullWidth.html} +81 -16
- package/src/animated/{ThumbnailSideBySideTransparent.html → StickySectionPresetsGridRows.html} +100 -17
- package/src/animated/{ThumbnailGridTransparent.html → StickySectionPresetsSideBySide.html} +82 -16
- package/src/animated/{ThumbnailSplitTransparent.html → StickySectionPresetsSplit.html} +99 -18
- package/src/animated/{ThumbnailZigzagTransparent.html → StickySectionPresetsZigzag.html} +92 -21
- package/dist/cjs/animated/ThumbnailFullWidth.js +0 -88
- package/dist/cjs/animated/ThumbnailGrid.js +0 -88
- package/dist/cjs/animated/ThumbnailSideBySide.js +0 -88
- package/dist/cjs/animated/ThumbnailSideBySideTransparent.js +0 -88
- package/dist/cjs/animated/ThumbnailSplit.js +0 -88
- package/dist/cjs/animated/ThumbnailSplitTransparent.js +0 -88
- package/dist/cjs/animated/ThumbnailZigzag.js +0 -88
- package/dist/esm/animated/ThumbnailFullWidth.js +0 -44
- package/dist/esm/animated/ThumbnailGrid.js +0 -44
- package/dist/esm/animated/ThumbnailGridTransparent.js +0 -44
- package/dist/esm/animated/ThumbnailSideBySide.js +0 -44
- package/dist/esm/animated/ThumbnailSideBySideTransparent.js +0 -44
- package/dist/esm/animated/ThumbnailSplit.js +0 -44
- package/dist/esm/animated/ThumbnailSplitTransparent.js +0 -44
- package/dist/esm/animated/ThumbnailZigzag.js +0 -44
- package/dist/types/animated/ThumbnailFullWidth.d.ts +0 -7
- package/dist/types/animated/ThumbnailFullWidthTransparent.d.ts +0 -7
- package/dist/types/animated/ThumbnailGrid.d.ts +0 -7
- package/dist/types/animated/ThumbnailGridTransparent.d.ts +0 -7
- package/dist/types/animated/ThumbnailSideBySide.d.ts +0 -7
- package/dist/types/animated/ThumbnailSideBySideTransparent.d.ts +0 -7
- package/dist/types/animated/ThumbnailSplit.d.ts +0 -7
- package/dist/types/animated/ThumbnailSplitTransparent.d.ts +0 -7
- package/dist/types/animated/ThumbnailZigzag.d.ts +0 -7
- package/dist/types/animated/ThumbnailZigzagTransparent.d.ts +0 -7
- package/src/animated/ThumbnailFullWidth.html +0 -133
- package/src/animated/ThumbnailGrid.html +0 -134
- package/src/animated/ThumbnailSideBySide.html +0 -160
- package/src/animated/ThumbnailSplit.html +0 -139
- package/src/animated/ThumbnailZigzag.html +0 -162
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const ThumbnailSplit = forwardRef(
|
|
3
|
-
({ className, ...props }, ref) => {
|
|
4
|
-
const svgRef = useRef(null);
|
|
5
|
-
const uid = useId().replace(/:/g, "");
|
|
6
|
-
useImperativeHandle(
|
|
7
|
-
ref,
|
|
8
|
-
() => ({
|
|
9
|
-
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
-
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
-
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
-
a.currentTime = 0;
|
|
13
|
-
a.pause();
|
|
14
|
-
})
|
|
15
|
-
}),
|
|
16
|
-
[]
|
|
17
|
-
);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
-
a.currentTime = 0;
|
|
21
|
-
a.pause();
|
|
22
|
-
});
|
|
23
|
-
}, []);
|
|
24
|
-
return /* @__PURE__ */ React.createElement(
|
|
25
|
-
"svg",
|
|
26
|
-
{
|
|
27
|
-
ref: svgRef,
|
|
28
|
-
viewBox: "0 0 68 68",
|
|
29
|
-
fill: "none",
|
|
30
|
-
width: 68,
|
|
31
|
-
height: 68,
|
|
32
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["ThumbnailSplit-root", className].filter(Boolean).join(" "),
|
|
34
|
-
...props
|
|
35
|
-
},
|
|
36
|
-
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("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" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "0.944444", dy: "0.944444" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.41667" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("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" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4428_19363" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4428_19363)` }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "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)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483278" }, /* @__PURE__ */ React.createElement("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)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplit-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("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)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
ThumbnailSplit.displayName = "ThumbnailSplit";
|
|
42
|
-
export {
|
|
43
|
-
ThumbnailSplit
|
|
44
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const ThumbnailSplitTransparent = forwardRef(
|
|
3
|
-
({ className, ...props }, ref) => {
|
|
4
|
-
const svgRef = useRef(null);
|
|
5
|
-
const uid = useId().replace(/:/g, "");
|
|
6
|
-
useImperativeHandle(
|
|
7
|
-
ref,
|
|
8
|
-
() => ({
|
|
9
|
-
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
-
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
-
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
-
a.currentTime = 0;
|
|
13
|
-
a.pause();
|
|
14
|
-
})
|
|
15
|
-
}),
|
|
16
|
-
[]
|
|
17
|
-
);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
-
a.currentTime = 0;
|
|
21
|
-
a.pause();
|
|
22
|
-
});
|
|
23
|
-
}, []);
|
|
24
|
-
return /* @__PURE__ */ React.createElement(
|
|
25
|
-
"svg",
|
|
26
|
-
{
|
|
27
|
-
ref: svgRef,
|
|
28
|
-
viewBox: "0 0 68 68",
|
|
29
|
-
fill: "none",
|
|
30
|
-
width: 68,
|
|
31
|
-
height: 68,
|
|
32
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["ThumbnailSplitTransparent-root", className].filter(Boolean).join(" "),
|
|
34
|
-
...props
|
|
35
|
-
},
|
|
36
|
-
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4428_19363`, x1: "97.8231", y1: "29.0557", x2: "58.7726", y2: "91.8283", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4428_19363`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4428_19363" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4428_19363` }, /* @__PURE__ */ React.createElement("rect", { x: "55", y: "33", width: "22", height: "21", rx: "2.83333", transform: "rotate(90 55 33)", fill: "white" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2-2-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" })), /* @__PURE__ */ React.createElement("mask", { id: `${uid}-am-node-1-2`, maskUnits: "userSpaceOnUse", "mask-type": "alpha", x: "0", y: "0", width: "68", height: "68" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "7.55556", fill: "var(--color-1)" }))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", opacity: "0.25" }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "13", y: "13", width: "42", height: "42", rx: "2.83333", fill: "var(--color-2)" }))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483281" }, /* @__PURE__ */ React.createElement("path", { style: { "transformBox": "fill-box", "transformOrigin": "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)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2-2-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483278" }, /* @__PURE__ */ React.createElement("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)" }))), /* @__PURE__ */ React.createElement("g", { mask: `url(#${uid}-am-node-1-2)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailSplitTransparent-Frame-1707483277" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4428_19363)` }, /* @__PURE__ */ React.createElement("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)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4428_19363)` }, /* @__PURE__ */ React.createElement("path", { d: "M104.953 62.2891L104.953 23.5634L25.5188 23.5634L25.5188 62.2891L104.953 62.2891Z", fill: `url(#${uid}-paint0_linear_4428_19363)` }))))))))
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
ThumbnailSplitTransparent.displayName = "ThumbnailSplitTransparent";
|
|
42
|
-
export {
|
|
43
|
-
ThumbnailSplitTransparent
|
|
44
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
|
|
2
|
-
const ThumbnailZigzag = forwardRef(
|
|
3
|
-
({ className, ...props }, ref) => {
|
|
4
|
-
const svgRef = useRef(null);
|
|
5
|
-
const uid = useId().replace(/:/g, "");
|
|
6
|
-
useImperativeHandle(
|
|
7
|
-
ref,
|
|
8
|
-
() => ({
|
|
9
|
-
play: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.play()),
|
|
10
|
-
pause: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => a.pause()),
|
|
11
|
-
reset: () => svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
12
|
-
a.currentTime = 0;
|
|
13
|
-
a.pause();
|
|
14
|
-
})
|
|
15
|
-
}),
|
|
16
|
-
[]
|
|
17
|
-
);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
svgRef.current?.getAnimations({ subtree: true }).forEach((a) => {
|
|
20
|
-
a.currentTime = 0;
|
|
21
|
-
a.pause();
|
|
22
|
-
});
|
|
23
|
-
}, []);
|
|
24
|
-
return /* @__PURE__ */ React.createElement(
|
|
25
|
-
"svg",
|
|
26
|
-
{
|
|
27
|
-
ref: svgRef,
|
|
28
|
-
viewBox: "0 0 68 68",
|
|
29
|
-
fill: "none",
|
|
30
|
-
width: 68,
|
|
31
|
-
height: 68,
|
|
32
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
className: ["ThumbnailZigzag-root", className].filter(Boolean).join(" "),
|
|
34
|
-
...props
|
|
35
|
-
},
|
|
36
|
-
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: `${uid}-paint0_linear_4424_19163`, x1: "113.06", y1: "9.65327", x2: "47.0261", y2: "92.6155", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: "0.176006", stopColor: "#EAEFFF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.55", stopColor: "#B8C4FF" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.8", stopColor: "#002294" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter0_i_4424_19163`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("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" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "1", dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("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" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4424_19163" })), /* @__PURE__ */ React.createElement("filter", { id: `${uid}-filter1_f_4424_19163`, filterUnits: "objectBoundingBox", x: "-1", y: "-1", width: "3", height: "3", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { result: "BackgroundImageFix", floodOpacity: "0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "2.36111", result: "effect1_foregroundBlur_4424_19163" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip0_4424_19163` }, /* @__PURE__ */ React.createElement("rect", { width: "68", height: "68", fill: "white" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip1_4424_19163` }, /* @__PURE__ */ React.createElement("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" })), /* @__PURE__ */ React.createElement("clipPath", { id: `${uid}-clip2_4424_19163` }, /* @__PURE__ */ React.createElement("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" }))),
|
|
37
|
-
/* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter0_i_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip0_4424_19163)` }, /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip1_4424_19163)` }, /* @__PURE__ */ React.createElement("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)" }), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("rect", { x: "0", y: "0", width: "68", height: "68", rx: "3.77778", fill: "var(--color-1)" })))), /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483283" }, /* @__PURE__ */ React.createElement("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)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483285" }, /* @__PURE__ */ React.createElement("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)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483284" }, /* @__PURE__ */ React.createElement("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)" })), /* @__PURE__ */ React.createElement("g", { fill: "none", className: "ThumbnailZigzag-Frame-1707483282" }, /* @__PURE__ */ React.createElement("g", { fill: "none", clipPath: `url(#${uid}-clip2_4424_19163)` }, /* @__PURE__ */ React.createElement("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)" }), /* @__PURE__ */ React.createElement("g", { fill: "none", filter: `url(#${uid}-filter1_f_4424_19163)` }, /* @__PURE__ */ React.createElement("path", { d: "M121.734 61.3828L121.734 1.10425L25.0979 1.10425L25.0979 61.3828L121.734 61.3828Z", fill: `url(#${uid}-paint0_linear_4424_19163)` })))))))
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
ThumbnailZigzag.displayName = "ThumbnailZigzag";
|
|
42
|
-
export {
|
|
43
|
-
ThumbnailZigzag
|
|
44
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailFullWidthHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailFullWidth: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailFullWidthHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailFullWidthTransparentHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailFullWidthTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailFullWidthTransparentHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailGridHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailGrid: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailGridHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailGridTransparentHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailGridTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailGridTransparentHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailSideBySideHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailSideBySide: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSideBySideHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailSideBySideTransparentHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailSideBySideTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSideBySideTransparentHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailSplitHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailSplit: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSplitHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailSplitTransparentHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailSplitTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailSplitTransparentHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailZigzagHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailZigzag: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailZigzagHandle>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ThumbnailZigzagTransparentHandle = {
|
|
3
|
-
play: () => void;
|
|
4
|
-
pause: () => void;
|
|
5
|
-
reset: () => void;
|
|
6
|
-
};
|
|
7
|
-
export declare const ThumbnailZigzagTransparent: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<ThumbnailZigzagTransparentHandle>>;
|
|
@@ -1,133 +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.591696px);
|
|
27
|
-
animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
|
|
28
|
-
}
|
|
29
|
-
40.336842% {
|
|
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, 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
|
-
.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, 30px);
|
|
67
|
-
animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
|
|
68
|
-
}
|
|
69
|
-
26.315789% {
|
|
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_19355" x1="77.0184" y1="29.0713" x2="37.9679" y2="91.8439" 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_19355" 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="1" dy="1"/>
|
|
88
|
-
<feGaussianBlur stdDeviation="1.5"/>
|
|
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_19355"/>
|
|
92
|
-
</filter>
|
|
93
|
-
<filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4428_19355" 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_19355"/>
|
|
97
|
-
</filter>
|
|
98
|
-
<clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4428_19355">
|
|
99
|
-
<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"/>
|
|
100
|
-
</clipPath>
|
|
101
|
-
<clipPath xmlns="http://www.w3.org/2000/svg" id="clip1_4428_19355">
|
|
102
|
-
<rect x="55" y="33" width="22" height="42" rx="1.88889" transform="rotate(90 55 33)" fill="white"/>
|
|
103
|
-
</clipPath>
|
|
104
|
-
</defs>
|
|
105
|
-
<g fill="none" filter="url(#filter0_i_4428_19355)">
|
|
106
|
-
<g fill="none">
|
|
107
|
-
<g fill="none" clip-path="url(#clip0_4428_19355)">
|
|
108
|
-
<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)" />
|
|
109
|
-
<g fill="none">
|
|
110
|
-
<rect x="0" y="0" width="68" height="68" fill="var(--color-1)" />
|
|
111
|
-
<g fill="none">
|
|
112
|
-
<g class="Frame-1707483281" fill="none">
|
|
113
|
-
<path d="M 55 14.88889 L 55 33.11111 A 1.88889 1.88889 45 0 1 53.11111 35 L 14.88889 35 A 1.88889 1.88889 45 0 1 13 33.11111 L 13 14.88889 A 1.88889 1.88889 45 0 1 14.88889 13 L 53.11111 13 A 1.88889 1.88889 45 0 1 55 14.88889 Z" fill="var(--color-2)" />
|
|
114
|
-
</g>
|
|
115
|
-
<g class="Frame-1707483278" fill="none">
|
|
116
|
-
<path d="M 55 24.88889 L 55 43.11111 A 1.88889 1.88889 45 0 1 53.11111 45 L 14.88889 45 A 1.88889 1.88889 45 0 1 13 43.11111 L 13 24.88889 A 1.88889 1.88889 45 0 1 14.88889 23 L 53.11111 23 A 1.88889 1.88889 45 0 1 55 24.88889 Z" fill="var(--color-3)" />
|
|
117
|
-
</g>
|
|
118
|
-
<g class="Frame-1707483277" fill="none">
|
|
119
|
-
<g fill="none" clip-path="url(#clip1_4428_19355)">
|
|
120
|
-
<path d="M 55 34.88889 L 55 53.11111 A 1.88889 1.88889 45 0 1 53.11111 55 L 14.88889 55 A 1.88889 1.88889 45 0 1 13 53.11111 L 13 34.88889 A 1.88889 1.88889 45 0 1 14.88889 33 L 53.11111 33 A 1.88889 1.88889 45 0 1 55 34.88889 Z" fill="var(--color-2)" />
|
|
121
|
-
<g fill="none" filter="url(#filter1_f_4428_19355)">
|
|
122
|
-
<path d="M84.1484 62.3047L84.1484 23.5791L4.71411 23.5791L4.71411 62.3047L84.1484 62.3047Z" fill="url(#paint0_linear_4428_19355)" />
|
|
123
|
-
</g>
|
|
124
|
-
</g>
|
|
125
|
-
</g>
|
|
126
|
-
</g>
|
|
127
|
-
</g>
|
|
128
|
-
</g>
|
|
129
|
-
</g>
|
|
130
|
-
</g>
|
|
131
|
-
</svg>
|
|
132
|
-
</body>
|
|
133
|
-
</html>
|
|
@@ -1,134 +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
|
-
.Group-2147222318 {
|
|
19
|
-
transform-box: fill-box;
|
|
20
|
-
transform-origin: 50% 50%;
|
|
21
|
-
animation: Group-2147222318-transform 2375ms linear infinite both;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@keyframes Group-2147222318-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-2147222319 {
|
|
39
|
-
transform-box: fill-box;
|
|
40
|
-
transform-origin: 50% 50%;
|
|
41
|
-
animation: Group-2147222319-transform 2375ms linear infinite both;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@keyframes Group-2147222319-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-2147222320 {
|
|
59
|
-
transform-box: fill-box;
|
|
60
|
-
transform-origin: 50% 50%;
|
|
61
|
-
animation: Group-2147222320-transform 2375ms linear infinite both;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@keyframes Group-2147222320-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_19258" x1="66.5888" y1="5.72025" x2="19.8579" y2="25.1921" 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_4424_19258" 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_4424_19258"/>
|
|
92
|
-
</filter>
|
|
93
|
-
<filter xmlns="http://www.w3.org/2000/svg" id="filter1_f_4424_19258" 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_4424_19258"/>
|
|
97
|
-
</filter>
|
|
98
|
-
<clipPath xmlns="http://www.w3.org/2000/svg" id="clip0_4424_19258">
|
|
99
|
-
<rect width="13.2632" height="21.0139" rx="1.88889" transform="matrix(-1 0 0 1 55 27.9922)" fill="white"/>
|
|
100
|
-
</clipPath>
|
|
101
|
-
<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>
|
|
102
|
-
</defs>
|
|
103
|
-
<g mask="url(#am-node-1-2)">
|
|
104
|
-
<g>
|
|
105
|
-
<g fill="none" filter="url(#filter0_i_4424_19258)">
|
|
106
|
-
<rect x="0" y="0" width="68" height="68" rx="7.55556" fill="var(--color-1)" />
|
|
107
|
-
<g fill="none">
|
|
108
|
-
<g class="Group-2147222318" fill="none">
|
|
109
|
-
<g fill="none">
|
|
110
|
-
<path d="M 24.36891 19 L 14.88349 19 A 1.88889 1.88889 90 0 0 12.9946 20.88889 L 12.9946 38.12501 A 1.88889 1.88889 90 0 0 14.88349 40.0139 L 24.36891 40.0139 A 1.88889 1.88889 90 0 0 26.2578 38.12501 L 26.2578 20.88889 A 1.88889 1.88889 90 0 0 24.36891 19 Z" fill="var(--color-2)" />
|
|
111
|
-
</g>
|
|
112
|
-
</g>
|
|
113
|
-
<g class="Group-2147222319" fill="none">
|
|
114
|
-
<g fill="none">
|
|
115
|
-
<path d="M 38.74391 23.4844 L 29.25849 23.4844 A 1.88889 1.88889 90 0 0 27.3696 25.37329 L 27.3696 42.60941 A 1.88889 1.88889 90 0 0 29.25849 44.4983 L 38.74391 44.4983 A 1.88889 1.88889 90 0 0 40.6328 42.60941 L 40.6328 25.37329 A 1.88889 1.88889 90 0 0 38.74391 23.4844 Z" fill="var(--color-3)" />
|
|
116
|
-
</g>
|
|
117
|
-
</g>
|
|
118
|
-
<g class="Group-2147222320" fill="none">
|
|
119
|
-
<g fill="none">
|
|
120
|
-
<g fill="none" clip-path="url(#clip0_4424_19258)">
|
|
121
|
-
<path d="M 53.11111 27.9922 L 43.62569 27.9922 A 1.88889 1.88889 90 0 0 41.7368 29.88109 L 41.7368 47.11721 A 1.88889 1.88889 90 0 0 43.62569 49.0061 L 53.11111 49.0061 A 1.88889 1.88889 90 0 0 55 47.11721 L 55 29.88109 A 1.88889 1.88889 90 0 0 53.11111 27.9922 Z" fill="var(--color-2)" />
|
|
122
|
-
<g fill="none" filter="url(#filter1_f_4424_19258)">
|
|
123
|
-
<path d="M69.3828 55.9609L69.3828 -2.58272H38.2549L38.2549 55.9609H69.3828Z" fill="url(#paint0_linear_4424_19258)" />
|
|
124
|
-
</g>
|
|
125
|
-
</g>
|
|
126
|
-
</g>
|
|
127
|
-
</g>
|
|
128
|
-
</g>
|
|
129
|
-
</g>
|
|
130
|
-
</g>
|
|
131
|
-
</g>
|
|
132
|
-
</svg>
|
|
133
|
-
</body>
|
|
134
|
-
</html>
|