components/svg/shapes/decagone.tsx

import { motion } from "framer-motion";
import { forwardRef } from "react";

export const Decagone = 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 302 286"
      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="M272.1,103.965 C267.8,89.8645 280.7,67.0645 272.1,55.4645 C263.5,43.8645 237.6,48.9645 225.9,40.4645 C214.3,32.0645 210.7,5.06456 197.2,1.36456 C183.7,-2.43544 165.9,16.3646 150.9,16.3646 C135.9,16.3646 118.6,-4.43544 104.6,0.864559 C90.4999,6.16456 87.6999,32.1645 75.899902,40.5645 C64.0999,49.0645 37.5999,44.5645 29.399902,55.5645 C21.1999,66.5645 33.899902,90.7645 29.399902,104.065 C24.899902,117.365 0.899902,128.464 0.899902,143.164 C0.899902,157.964 25.4999,168.264 29.7999,182.264 C34.0999,196.264 21.1999,219.164 29.7999,230.764 C38.4999,242.364 64.2999,237.264 75.9999,245.764 C87.5999,254.164 91.399902,281.165 104.9,284.865 C118.4,288.565 136.2,269.865 151.2,269.865 C166.2,269.865 183.5,289.565 197.5,284.865 C211.6,280.165 214.8,254.064 226.4,245.764 C238,237.264 264.3,241.764 272.6,230.764 C280.8,219.764 268.1,195.564 272.6,182.264 C277.1,168.964 301.1,157.864 301.1,143.164 C300.9,128.364 276.4,117.965 272.1,103.965 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}
            strokeLinejoin="round"
            strokeWidth={shape?.border?.width}
            onClick={props?.onClick ? props.onClick : () => {}}
          />
        </g>
      </g>
      {!shape?.transparency && props?.children && props.children}
    </svg>
  );
});