commit e1a1739eac9d8810fc764090390767a165d682b4 parent 52250d3192fc882ed92078c7a93a002e314ae4ed Author: Daniel D’Aquino <daniel@daquino.me> Date: Wed, 3 Jan 2024 14:51:53 -0800 Fix React errors regarding certain svg parameters Diffstat:
| M | src/components/effects/MeshGradient.2.tsx | | | 57 | ++++++++++++++++++++++++++++----------------------------- |
| M | src/components/effects/MeshGradient.3.tsx | | | 39 | +++++++++++++++++++-------------------- |
| M | src/components/effects/MeshGradient.4.tsx | | | 39 | +++++++++++++++++++-------------------- |
3 files changed, 66 insertions(+), 69 deletions(-)
diff --git a/src/components/effects/MeshGradient.2.tsx b/src/components/effects/MeshGradient.2.tsx @@ -2,31 +2,31 @@ import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; export function MeshGradient2({ className }: { className?: string }) { - return ( - <motion.div - className={cn(className)} - > - <svg - xmlns="http://www.w3.org/2000/svg" width="1279" height="699" viewBox="0 0 1279 699" fill="none" - style={{ - transform: "rotate(-3.309deg)" - }} - > - <g filter="url(#filter0_f_3380_30662)"> - <path d="M433.405 498.413L263.962 452.216L200.399 412.895L239.833 230.138L1024.58 200.77L1078.14 279.163L948.256 286.672L962.339 412.827L746.717 315.821L693.901 452.177L610.721 323.683L466.915 374.991L433.405 498.413Z" fill="url(#paint0_linear_3380_30662)" fill-opacity="0.5" /> - </g> - <defs> - <filter id="filter0_f_3380_30662" x="0.398651" y="0.769897" width="1277.74" height="697.643" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> - <feFlood flood-opacity="0" result="BackgroundImageFix" /> - <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> - <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3380_30662" /> - </filter> - <linearGradient id="paint0_linear_3380_30662" x1="190" y1="233.019" x2="786.493" y2="786.28" gradientUnits="userSpaceOnUse"> - <stop stop-color="#FD1818" /> - <stop offset="1" stop-color="#440101" /> - </linearGradient> - </defs> - </svg> - </motion.div> - ) -}- \ No newline at end of file + return ( + <motion.div + className={cn(className)} + > + <svg + xmlns="http://www.w3.org/2000/svg" width="1279" height="699" viewBox="0 0 1279 699" fill="none" + style={{ + transform: "rotate(-3.309deg)" + }} + > + <g filter="url(#filter0_f_3380_30662)"> + <path d="M433.405 498.413L263.962 452.216L200.399 412.895L239.833 230.138L1024.58 200.77L1078.14 279.163L948.256 286.672L962.339 412.827L746.717 315.821L693.901 452.177L610.721 323.683L466.915 374.991L433.405 498.413Z" fill="url(#paint0_linear_3380_30662)" fillOpacity="0.5" /> + </g> + <defs> + <filter id="filter0_f_3380_30662" x="0.398651" y="0.769897" width="1277.74" height="697.643" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> + <feFlood floodOpacity="0" result="BackgroundImageFix" /> + <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> + <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3380_30662" /> + </filter> + <linearGradient id="paint0_linear_3380_30662" x1="190" y1="233.019" x2="786.493" y2="786.28" gradientUnits="userSpaceOnUse"> + <stop stopColor="#FD1818" /> + <stop offset="1" stopColor="#440101" /> + </linearGradient> + </defs> + </svg> + </motion.div> + ) +} diff --git a/src/components/effects/MeshGradient.3.tsx b/src/components/effects/MeshGradient.3.tsx @@ -1,20 +1,20 @@ export function MeshGradient3({ className }: { className?: string }) { - return (<> - <svg xmlns="http://www.w3.org/2000/svg" width="1194" height="602" viewBox="0 0 1194 602" fill="none" className={className}> - <g filter="url(#filter0_f_3378_30515)"> - <path d="M6.46496 401.04L-257.086 378.698L-356.821 348.254L-303.142 159.296L907.82 18.627L993.657 89.6928L793.329 115.632L641.892 188.18L483.185 173.438L273.436 200.597L53.3411 272.456L6.46496 401.04Z" fill="url(#paint0_linear_3378_30515)" fill-opacity="0.5"/> - </g> - <defs> - <filter id="filter0_f_3378_30515" x="-556.821" y="-181.373" width="1750.48" height="782.413" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> - <feFlood flood-opacity="0" result="BackgroundImageFix"/> - <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> - <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3378_30515"/> - </filter> - <linearGradient id="paint0_linear_3378_30515" x1="-380" y1="169.248" x2="226.661" y2="914.002" gradientUnits="userSpaceOnUse"> - <stop stop-color="#4E4DF4"/> - <stop offset="1" stop-color="#D34CD9"/> - </linearGradient> - </defs> - </svg> - </>) -}- \ No newline at end of file + return (<> + <svg xmlns="http://www.w3.org/2000/svg" width="1194" height="602" viewBox="0 0 1194 602" fill="none" className={className}> + <g filter="url(#filter0_f_3378_30515)"> + <path d="M6.46496 401.04L-257.086 378.698L-356.821 348.254L-303.142 159.296L907.82 18.627L993.657 89.6928L793.329 115.632L641.892 188.18L483.185 173.438L273.436 200.597L53.3411 272.456L6.46496 401.04Z" fill="url(#paint0_linear_3378_30515)" fillOpacity="0.5" /> + </g> + <defs> + <filter id="filter0_f_3378_30515" x="-556.821" y="-181.373" width="1750.48" height="782.413" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> + <feFlood floodOpacity="0" result="BackgroundImageFix" /> + <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> + <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3378_30515" /> + </filter> + <linearGradient id="paint0_linear_3378_30515" x1="-380" y1="169.248" x2="226.661" y2="914.002" gradientUnits="userSpaceOnUse"> + <stop stopColor="#4E4DF4" /> + <stop offset="1" stopColor="#D34CD9" /> + </linearGradient> + </defs> + </svg> + </>) +} diff --git a/src/components/effects/MeshGradient.4.tsx b/src/components/effects/MeshGradient.4.tsx @@ -1,20 +1,20 @@ export function MeshGradient4({ className }: { className?: string }) { - return (<> - <svg xmlns="http://www.w3.org/2000/svg" width="1278" height="699" viewBox="0 0 1278 699" fill="none" className={className}> - <g filter="url(#filter0_f_3722_32860)"> - <path d="M433.091 498.432L263.647 452.234L200.084 412.914L239.519 230.156L1024.27 200.788L1077.83 279.182L947.942 286.691L962.025 412.846L746.403 315.839L693.586 452.196L610.407 323.701L466.6 375.009L433.091 498.432Z" fill="url(#paint0_linear_3722_32860)" fill-opacity="0.5" /> - </g> - <defs> - <filter id="filter0_f_3722_32860" x="0.0843506" y="0.78833" width="1277.74" height="697.643" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> - <feFlood flood-opacity="0" result="BackgroundImageFix" /> - <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> - <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3722_32860" /> - </filter> - <linearGradient id="paint0_linear_3722_32860" x1="189.686" y1="233.037" x2="786.179" y2="786.298" gradientUnits="userSpaceOnUse"> - <stop stop-color="#18E1FD" /> - <stop offset="1" stop-color="#FF659C" /> - </linearGradient> - </defs> - </svg> - </>) -}- \ No newline at end of file + return (<> + <svg xmlns="http://www.w3.org/2000/svg" width="1278" height="699" viewBox="0 0 1278 699" fill="none" className={className}> + <g filter="url(#filter0_f_3722_32860)"> + <path d="M433.091 498.432L263.647 452.234L200.084 412.914L239.519 230.156L1024.27 200.788L1077.83 279.182L947.942 286.691L962.025 412.846L746.403 315.839L693.586 452.196L610.407 323.701L466.6 375.009L433.091 498.432Z" fill="url(#paint0_linear_3722_32860)" fillOpacity="0.5" /> + </g> + <defs> + <filter id="filter0_f_3722_32860" x="0.0843506" y="0.78833" width="1277.74" height="697.643" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> + <feFlood floodOpacity="0" result="BackgroundImageFix" /> + <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> + <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3722_32860" /> + </filter> + <linearGradient id="paint0_linear_3722_32860" x1="189.686" y1="233.037" x2="786.179" y2="786.298" gradientUnits="userSpaceOnUse"> + <stop stopColor="#18E1FD" /> + <stop offset="1" stopColor="#FF659C" /> + </linearGradient> + </defs> + </svg> + </>) +}