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