Remote{" "} {"Connectivity".split("").map((word, idx) => ( {word} ))}

Break free from traditional boundaries. Work from anywhere, at the comfort of your own studio apartment. Perfect for Nomads and Travellers.

); } `,__rawStringJsx__:`"use client"; import WorldMap from "@/components/ui/world-map"; import { motion } from "motion/react"; export function WorldMapDemo() { return ( (

Remote{" "} {"Connectivity".split("").map((word, idx) => ( {word} ))}

Break free from traditional boundaries. Work from anywhere, at the comfort of your own studio apartment. Perfect for Nomads and Travellers.

) ); } `,__src__:"/src/registry/default/example/world-map-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"WorldMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"@/components/ui/world-map"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"motion/react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"WorldMapDemo"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'" py-40 dark:bg-black bg-white w-full"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"max-w-7xl mx-auto text-center"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"font-bold text-xl md:text-4xl dark:text-white text-black"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Remote"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'" "'}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-400"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"Connectivity"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"split"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"word"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"inline-block"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.04"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"word"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Break free from traditional boundaries. Work from anywhere, at the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" comfort of your own studio apartment. Perfect for Nomads and"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Travellers."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"WorldMap"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"dots"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"64.2008"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"149.4937"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Alaska (Fairbanks)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"34.0522"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"118.2437"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Los Angeles"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"64.2008"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"149.4937"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Alaska (Fairbanks)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"15.7975"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"47.8919"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Brazil (Bras\xEDlia)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"15.7975"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"47.8919"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Brazil (Bras\xEDlia)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"38.7223"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"9.1393"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Lisbon"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"51.5074"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.1278"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// London"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"28.6139"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"77.209"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// New Delhi"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"28.6139"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"77.209"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// New Delhi"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"43.1332"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"131.9113"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Vladivostok"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"28.6139"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"77.209"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// New Delhi"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1.2921"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"36.8219"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// Nairobi"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ]"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(a,{defaultValue:"manual",children:[(0,n.jsxs)(r,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(d,{value:"cli",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(o,{children:"Run the following command"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/world-map.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/world-map.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/world-map.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/world-map.json `,__bunCommand__:`bunx --bun shadcn@latest add https://ui.aceternity.com/registry/world-map.json `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"https://ui.aceternity.com/registry/world-map.json"})]})})})})]})}),(0,n.jsx)(d,{value:"manual",children:(0,n.jsxs)(B,{children:[(0,n.jsx)(o,{children:"Install dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i motion clsx tailwind-merge dotted-map `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"dotted-map"})]})})})}),(0,n.jsx)(o,{children:"For React 19 / Next.js 15 users, follow the following packages"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install motion@12.0.0-alpha.2 `,__npmCommand__:`npm install motion@12.0.0-alpha.2 `,__yarnCommand__:`yarn add motion@12.0.0-alpha.2 `,__pnpmCommand__:`pnpm add motion@12.0.0-alpha.2 `,__bunCommand__:`bun add motion@12.0.0-alpha.2 `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"install"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"motion@12.0.0-alpha."}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"})]})})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install dotted-map --legacy-peer-deps `,__npmCommand__:`npm install dotted-map --legacy-peer-deps `,__yarnCommand__:`yarn add dotted-map --legacy-peer-deps `,__pnpmCommand__:`pnpm add dotted-map --legacy-peer-deps `,__bunCommand__:`bun add dotted-map --legacy-peer-deps `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"install"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"dotted-map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"--legacy-peer-deps"})]})})})}),(0,n.jsx)(o,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,n.jsx)(o,{children:"Copy the source code"}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.code,{children:"components/ui/world-map.tsx"})}),(0,n.jsx)(p,{name:"world-map",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import Image from "next/image"; import { useTheme } from "next-themes"; interface MapProps { dots?: Array<{ start: { lat: number; lng: number; label?: string }; end: { lat: number; lng: number; label?: string }; }>; lineColor?: string; } export function WorldMap({ dots = [], lineColor = "#0ea5e9", }: MapProps) { const svgRef = useRef(null); const map = new DottedMap({ height: 100, grid: "diagonal" }); const { theme } = useTheme(); const svgMap = map.getSVG({ radius: 0.22, color: theme === "dark" ? "#FFFFFF40" : "#00000040", shape: "circle", backgroundColor: theme === "dark" ? "black" : "white", }); const projectPoint = (lat: number, lng: number) => { const x = (lng + 180) * (800 / 360); const y = (90 - lat) * (400 / 180); return { x, y }; }; const createCurvedPath = ( start: { x: number; y: number }, end: { x: number; y: number } ) => { const midX = (start.x + end.x) / 2; const midY = Math.min(start.y, end.y) - 50; return \`M \${start.x} \${start.y} Q \${midX} \${midY} \${end.x} \${end.y}\`; }; return (

); } `,__rawStringJsx__:`"use client";; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import Image from "next/image"; import { useTheme } from "next-themes"; export function WorldMap({ dots = [], lineColor = "#0ea5e9" }) { const svgRef = useRef(null); const map = new DottedMap({ height: 100, grid: "diagonal" }); const { theme } = useTheme(); const svgMap = map.getSVG({ radius: 0.22, color: theme === "dark" ? "#FFFFFF40" : "#00000040", shape: "circle", backgroundColor: theme === "dark" ? "black" : "white", }); const projectPoint = (lat, lng) => { const x = (lng + 180) * (800 / 360); const y = (90 - lat) * (400 / 180); return { x, y }; }; const createCurvedPath = ( start, end ) => { const midX = (start.x + end.x) / 2; const midY = Math.min(start.y, end.y) - 50; return \`M \${start.x} \${start.y} Q \${midX} \${midY} \${end.x} \${end.y}\`; }; return ( (

) ); } `,__src__:"/src/registry/default/ui/world-map.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"motion/react"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"DottedMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"dotted-map"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"useTheme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"next-themes"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"MapProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"dots"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Array"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }>;"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"WorldMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"dots"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" [],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"#0ea5e9"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"MapProps"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"svgRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"SVGSVGElement"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"DottedMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"grid"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"diagonal"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"useTheme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"svgMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"getSVG"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"radius"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.22"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"dark"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"#FFFFFF40"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"#00000040"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"shape"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"circle"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"dark"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"black"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"800"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"360"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"90"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"400"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"createCurvedPath"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": { "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"midX"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"midY"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"min"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`M "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:" Q "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"midX"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"midY"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`data:image/svg+xml;utf8,"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"encodeURIComponent"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svgMap"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"world map"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"495"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1056"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"draggable"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"svgRef"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0 0 800 400"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"w-full h-full absolute inset-0 pointer-events-none select-none"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dots"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"startPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"endPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"g"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`path-group-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"createCurvedPath"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"startPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"endPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"url(#path-gradient)"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"pathLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"pathLength"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"ease"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"easeOut"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`start-upper-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" })"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"defs"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"linearGradient"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"path-gradient"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"x1"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"y1"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"x2"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"y2"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"5%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"95%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"stop"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopColor"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"stopOpacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dots"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"g"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`points-group-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"g"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`start-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"circle"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cx"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cy"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"r"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"circle"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cx"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cy"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"r"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0.5"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"animate"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"attributeName"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"r"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"to"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"8"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"dur"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1.5s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"begin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"repeatCount"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"indefinite"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"animate"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"attributeName"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"opacity"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0.5"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"to"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"dur"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1.5s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"begin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"repeatCount"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"indefinite"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"g"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`end-"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"circle"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cx"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cy"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"r"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"circle"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cx"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"cy"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#61AFEF"},children:"projectPoint"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lat"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"dot"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E5C07B"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lng"}),(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"r"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"lineColor"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0.5"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"animate"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"attributeName"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"r"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"to"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"8"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"dur"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1.5s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"begin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"repeatCount"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"indefinite"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#E06C75"},children:"animate"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"attributeName"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"opacity"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0.5"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"to"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"dur"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"1.5s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"begin"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"0s"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"repeatCount"}),(0,n.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#98C379"},children:'"indefinite"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Default"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"dots"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"Array<{start: Point, end: Point}>"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"[]"})}),(0,n.jsx)(l.td,{children:"Array of coordinate pairs representing connections on the map"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"lineColor"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"#0ea5e9"})}),(0,n.jsx)(l.td,{children:"Color of the lines connecting the dots"})]})]})]}),` `,(0,n.jsxs)(l.h3,{id:"point-object",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#point-object",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Point Object"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Property"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Required"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"lat"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:"Yes"}),(0,n.jsx)(l.td,{children:"Latitude coordinate (-90 to 90)"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"lng"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"number"})}),(0,n.jsx)(l.td,{children:"Yes"}),(0,n.jsx)(l.td,{children:"Longitude coordinate (-180 to 180)"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"label"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{children:"No"}),(0,n.jsx)(l.td,{children:"Optional label for the point"})]})]})]})]})}function S(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(F,e)})):F(e)}var w=S;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(_);})(); ;return Component;

Aceternity UI