Spaces:
Running
Running
File size: 3,257 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { motion } from "framer-motion";
import { forwardRef } from "react";
export const Shield2 = forwardRef((props: any, ref) => {
const { shape } = props;
const GradientType =
shape?.gradient?.type === "radialGradient"
? "radialGradient"
: "linearGradient";
return (
<svg
ref={ref as any}
width={props?.width ?? 303}
height={props?.height ?? 303}
viewBox="0 0 255 323"
fill="none"
id={props?.id ?? undefined}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
{shape?.image?.enabled && shape?.image?.urls?.length > 0 && (
<pattern
id={`shape-gradient-${shape?.component ?? "null"}`}
x="0"
y="0"
patternUnits="userSpaceOnUse"
width={303}
height={303}
>
<image
href={shape?.image?.urls[0]}
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
/>
</pattern>
)}
<GradientType
id={`shape-gradient-${shape?.component ?? "null"}`}
gradientTransform={`rotate(${shape?.gradient?.angle ?? "90"})`}
>
{shape?.gradient?.enabled ? (
<>
{shape?.gradient?.colours?.map((color: any, c: number) => (
<stop
key={c}
offset={`${color.left}%`}
stopColor={color.value}
/>
))}
</>
) : (
<stop offset="0%" stopColor={shape?.colour ?? "#fff"} />
)}
</GradientType>
</defs>
<defs>
<mask id={`mask-${shape?.component ?? "null"}`} fill="black">
<rect width="100%" height="100%" fill="white" />
<g
style={{
transformOrigin: "center",
}}
opacity={100}
>
{shape?.transparency && props?.children && props.children}
</g>
</mask>
</defs>
<g fill={`url(#${`shape-gradient-${shape?.component ?? "null"}`})`}>
<g mask={`url(#${`mask-${shape?.component ?? "null"}`})`}>
<motion.path
d="M120.162 320.803a22.185 22.185 0 007.521 2.196 15.04 15.04 0 007.339-1.83c12.291-6.588 119.977-66.067 119.977-127.558V80.308a15.939 15.939 0 00-4.625-11.36 16.02 16.02 0 00-11.335-4.744c-54.852 0-98.33-57.649-98.881-58.198a16.5 16.5 0 00-5.7-4.429 16.542 16.542 0 00-19.8 4.429c-.367.549-43.845 58.198-98.697 58.198a16.018 16.018 0 00-11.335 4.744 15.97 15.97 0 00-4.625 11.36V193.41c0 61.509 107.87 120.805 120.161 127.394z"
animate={{
scaleX:
shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1,
scaleY:
shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1,
rotate: shape?.position?.angle ?? 0,
}}
stroke={shape?.border?.colour}
strokeLinejoin="round"
strokeWidth={shape?.border?.width}
onClick={props?.onClick ? props.onClick : () => {}}
/>
</g>
</g>
{!shape?.transparency && props?.children && props.children}
</svg>
);
});
|