| 8 | }; |
| 9 | |
| 10 | export const Spotlight = ({ className, fill }: SpotlightProps) => { |
| 11 | return ( |
| 12 | <svg |
| 13 | className={cn( |
| 14 | "animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0", |
| 15 | className |
| 16 | )} |
| 17 | xmlns="http://www.w3.org/2000/svg" |
| 18 | viewBox="0 0 3787 2842" |
| 19 | fill="none" |
| 20 | > |
| 21 | <g filter="url(#filter)"> |
| 22 | <ellipse |
| 23 | cx="1924.71" |
| 24 | cy="273.501" |
| 25 | rx="1924.71" |
| 26 | ry="273.501" |
| 27 | transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)" |
| 28 | fill={fill || "white"} |
| 29 | fillOpacity="0.21" |
| 30 | ></ellipse> |
| 31 | </g> |
| 32 | <defs> |
| 33 | <filter |
| 34 | id="filter" |
| 35 | x="0.860352" |
| 36 | y="0.838989" |
| 37 | width="3785.16" |
| 38 | height="2840.26" |
| 39 | filterUnits="userSpaceOnUse" |
| 40 | colorInterpolationFilters="sRGB" |
| 41 | > |
| 42 | <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood> |
| 43 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend> |
| 44 | <feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur_1065_8"></feGaussianBlur> |
| 45 | </filter> |
| 46 | </defs> |
| 47 | </svg> |
| 48 | ); |
| 49 | }; |