bg gradient from the codemod hero background converted to jsx

bg-gradient.tsx

const BGGradient = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <svg
        viewBox="0 0 1440 720"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="z-0 fixed h-80dvh w-full overflow-y-scroll rotate-180"
      >
        <g clipPath="url(#clip0_27_1751)">
          <rect width="1440" height="720" fill="#0E1414" />
          <g filter="url(#filter0_f_27_1751)">
            <ellipse
              cx="12"
              cy="549"
              rx="313"
              ry="463"
              fill="url(#paint0_linear_27_1751)"
            />
          </g>
          <g filter="url(#filter1_f_27_1751)">
            <ellipse
              cx="442"
              cy="801"
              rx="313"
              ry="559"
              transform="rotate(90 442 801)"
              fill="url(#paint1_linear_27_1751)"
            />
          </g>
          <g opacity="0.7" filter="url(#filter2_f_27_1751)">
            <ellipse
              cx="1536.81"
              cy="266.114"
              rx="156.28"
              ry="310.061"
              transform="rotate(-170.768 1536.81 266.114)"
              fill="url(#paint2_linear_27_1751)"
            />
          </g>
          <g opacity="0.3" filter="url(#filter3_f_27_1751)">
            <ellipse
              cx="1355.43"
              cy="100.263"
              rx="156.28"
              ry="169.385"
              transform="rotate(-170.768 1355.43 100.263)"
              fill="url(#paint3_linear_27_1751)"
            />
          </g>
          <g opacity="0.7" filter="url(#filter4_f_27_1751)">
            <ellipse
              cx="317.99"
              cy="700.475"
              rx="455.016"
              ry="169.385"
              transform="rotate(-170.768 317.99 700.475)"
              fill="url(#paint4_linear_27_1751)"
            />
          </g>
          <g filter="url(#filter5_f_27_1751)">
            <ellipse
              cx="462.5"
              cy="667"
              rx="370.5"
              ry="307"
              fill="url(#paint5_linear_27_1751)"
            />
          </g>
          <g filter="url(#filter6_f_27_1751)">
            <ellipse
              cx="1272.36"
              cy="-11.8801"
              rx="370.5"
              ry="307"
              transform="rotate(-150 1272.36 -11.8801)"
              fill="url(#paint6_linear_27_1751)"
            />
          </g>
          <rect
            y="293"
            width="1440"
            height="427"
            fill="url(#paint7_linear_27_1751)"
          />
        </g>
        <defs>
          <filter
            id="filter0_f_27_1751"
            x="-473"
            y="-86"
            width="970"
            height="1270"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation="86"
              result="effect1_foregroundBlur_27_1751"
            />
          </filter>
          <linearGradient
            id="paint0_linear_27_1751"
            x1="12"
            y1="86"
            x2="12"
            y2="1012"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop
              offset="0.893525"
              stop-color="#FDDD35"
              stop-opacity="0.71"
            ></stop>
          </linearGradient>
          <linearGradient
            id="paint1_linear_27_1751"
            x1="442"
            y1="242"
            x2="442"
            y2="1360"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop offset="0.893525" stop-color="#FFEEA9"></stop>
          </linearGradient>
          <linearGradient
            id="paint2_linear_27_1751"
            x1="1536.81"
            y1="-43.947"
            x2="1536.81"
            y2="576.174"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop offset="0.893525" stop-color="#FFEEA9"></stop>
          </linearGradient>
          <linearGradient
            id="paint3_linear_27_1751"
            x1="1355.43"
            y1="-69.1219"
            x2="1355.43"
            y2="269.647"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop offset="0.893525" stop-color="#9CE2F0"></stop>
          </linearGradient>
          <linearGradient
            id="paint4_linear_27_1751"
            x1="34.7089"
            y1="824.503"
            x2="580.424"
            y2="766.199"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop offset="0.802835" stop-color="#9CE2F0"></stop>
          </linearGradient>
          <linearGradient
            id="paint5_linear_27_1751"
            x1="462.5"
            y1="360"
            x2="462.5"
            y2="974"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop
              offset="0.893525"
              stop-color="#FDDD35"
              stop-opacity="0.71"
            ></stop>
          </linearGradient>
          <linearGradient
            id="paint6_linear_27_1751"
            x1="1272.36"
            y1="-318.88"
            x2="1272.36"
            y2="295.12"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop
              offset="0.893525"
              stop-color="#FDDD35"
              stop-opacity="0.71"
            ></stop>
          </linearGradient>
          <linearGradient
            id="paint7_linear_27_1751"
            x1="720"
            y1="293"
            x2="720"
            y2="720"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#0E1414" stop-opacity="0"></stop>
            <stop offset="1" stop-color="#0E1414"></stop>
          </linearGradient>
          <clipPath id="clip0_27_1751">
            <rect width="1440" height="720" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
      {children}
    </>
  );
};