inmake/nks-virtual-tour
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix distance circle

Browse Source
This commit is contained in:
zojgame
2024-04-09 13:28:43 +05:00
parent a607911126
commit ce996a08ff
2 changed files with 73 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DistanceCircle.tsx
+73 -26
View File
@@ -5,37 +5,84 @@ interface DistanceCircleProps {
const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
return (
<svg
className="transition-[width] duration-300 ease-in-out"
width={(1600 * selectedRange) / 850}
viewBox="0 0 1600 1600"
width="2160"
height="2160"
viewBox="0 0 2160 2160"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute top-0 left-0 w-full h-full transition-all duration-300 ease-in-out"
>
<circle
cx="800"
cy="800"
r="798.5"
fill="url(#paint0_radial_193_12559)"
fillOpacity="0.6"
stroke="white"
strokeWidth={(3 * 850) / selectedRange}
/>
<defs>
<radialGradient
id="paint0_radial_193_12559"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(800 800) rotate(90) scale(800)"
>
<stop stopColor="#0079C2" stop-opacity="0" />
<stop offset="0.82" stopColor="#0079C2" stop-opacity="0.08" />
<stop offset="1" stopColor="#0079C2" />
</radialGradient>
</defs>
<svg
className="transition-all duration-300 ease-in-out"
width={(0.8 * 1600 * selectedRange) / 850}
x={1080 - (0.8 * 1600 * selectedRange) / 1700}
y={0}
viewBox="0 0 1600 1600"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="800"
cy="800"
r="798.5"
fill="url(#paint0_radial_193_12559)"
fillOpacity="0.6"
stroke="white"
strokeWidth={(3 * 850) / selectedRange}
/>
<defs>
<radialGradient
id="paint0_radial_193_12559"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(800 800) rotate(90) scale(800)"
>
<stop stopColor="#0079C2" stopOpacity="0" />
<stop offset="0.82" stopColor="#0079C2" stopOpacity="0.08" />
<stop offset="1" stopColor="#0079C2" />
</radialGradient>
</defs>
</svg>
</svg>
);
};
// const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
// return (
// <svg
// className="transition-[width] duration-300 ease-in-out"
// width={(1600 * selectedRange) / 850}
// viewBox="0 0 1600 1600"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <circle
// cx="800"
// cy="800"
// r="798.5"
// fill="url(#paint0_radial_193_12559)"
// fillOpacity="0.6"
// stroke="white"
// strokeWidth={(3 * 850) / selectedRange}
// />
// <defs>
// <radialGradient
// id="paint0_radial_193_12559"
// cx="0"
// cy="0"
// r="1"
// gradientUnits="userSpaceOnUse"
// gradientTransform="translate(800 800) rotate(90) scale(800)"
// >
// <stop stopColor="#0079C2" stop-opacity="0" />
// <stop offset="0.82" stopColor="#0079C2" stop-opacity="0.08" />
// <stop offset="1" stopColor="#0079C2" />
// </radialGradient>
// </defs>
// </svg>
// );
// };
export default DistanceCircle;
src/components/Marks.tsx
-42
View File
@@ -1,42 +0,0 @@
const Marks = () => {
return (
<div className="absolute z-50 w-full h-full">
<svg>
<svg
x="25"
y="20"
xmlns="http://www.w3.org/2000/svg"
width="72"
height="72"
viewBox="0 0 72 72"
fill="none"
>
<g>
<rect x="2" y="2" width="68" height="68" rx="34" fill="#002347" />
<rect
x="2"
y="2"
width="68"
height="68"
rx="34"
stroke="white"
strokeWidth="4"
/>
<svg x="0" y="2">
<path
x="2"
y="2"
d="M29.75 27.5H26.375C24.511 27.5 23 29.011 23 30.875V48.875C23 50.739 24.511 52.25 26.375 52.25H46.625C48.489 52.25 50 50.739 50 48.875V30.875C50 29.011 48.489 27.5 46.625 27.5H43.25M29.75 27.5V33.125M29.75 27.5H43.25M29.75 27.5V25.25C29.75 24.3636 29.9246 23.4858 30.2638 22.6669C30.603 21.8479 31.1002 21.1038 31.727 20.477C32.3538 19.8502 33.0979 19.353 33.9169 19.0138C34.7358 18.6746 35.6136 18.5 36.5 18.5C37.3864 18.5 38.2642 18.6746 39.0831 19.0138C39.9021 19.353 40.6462 19.8502 41.273 20.477C41.8998 21.1038 42.397 21.8479 42.7362 22.6669C43.0754 23.4858 43.25 24.3636 43.25 25.25V27.5M43.25 27.5V33.125"
stroke="white"
strokeWidth="3.75"
strokeLinecap="square"
/>
</svg>
</g>
</svg>
</svg>
</div>
);
};
export default Marks;