Spaces:
Running
Running
| import { motion } from "framer-motion"; | |
| import { forwardRef } from "react"; | |
| export const Shield4 = 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 304 306" | |
| 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="M152.291327,0.828009955 L167.424987,8.0502006 L171.20868,9.83895962 C174.342707,11.3111326 177.429088,12.7371572 180.467656,14.1170372 L180.467656,14.1170372 L184.090978,15.7507441 C187.09127,17.0937091 190.043683,18.3905311 192.948053,19.6412138 L192.948053,19.6412138 L196.410224,21.1198864 C202.715221,23.7901846 208.787365,26.2371762 214.624892,28.4609016 L214.624892,28.4609016 L217.78572,29.6517009 C219.354489,30.2360297 220.905783,30.8037525 222.439568,31.3548701 C238.04751,36.9630978 255.684819,40.9199117 275.372989,43.1678025 L275.372989,43.1678025 L303.81173,46.4147873 L302.419509,75.0044117 C300.118588,122.25441 286.810897,167.021852 262.65559,208.93179 C238.023556,251.668856 205.621027,282.272817 165.624947,299.841546 L165.624947,299.841546 L152.376561,305.599621 L140.244423,300.382796 C99.7426706,282.967021 66.8808737,252.156343 41.9678709,208.93179 C17.8125632,167.021852 4.5048728,122.25441 2.20395185,75.0044117 L2.20395185,75.0044117 L0.811730295,46.4147873 L29.2504714,43.1678025 C48.9386411,40.9199117 66.5759505,36.9630978 82.1838929,31.3548701 C93.9463652,27.1283921 106.737854,21.9256343 120.542445,15.7462847 L120.542445,15.7462847 L124.166614,14.1121269 C125.382324,13.5600231 126.605684,13.0005346 127.836683,12.4336613 L127.836683,12.4336613 L131.552589,10.7108866 C134.045126,9.54760015 136.568178,8.35477352 139.121664,7.13240503 L139.121664,7.13240503 L152.291327,0.828009955 Z" | |
| 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} | |
| strokeWidth={shape?.border?.width} | |
| onClick={props?.onClick ? props.onClick : () => {}} | |
| /> | |
| </g> | |
| </g> | |
| {!shape?.transparency && props?.children && props.children} | |
| </svg> | |
| ); | |
| }); | |