Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const Guide = ({ start, end }) => {
return [
<circle fill="gray" opacity={0.5} cx={start[0]} cy={start[1]} r={1} />,
<path
stroke="gray"
strokeWidth="1"
strokeOpacity={0.5}
fill="transparent"
d={line(start, end)}
/>,
<circle fill="gray" opacity={0.5} cx={end[0]} cy={end[1]} r={1} />
];
};
const App = () => {
const points = [
[30, 30],
[10, 40],
[10, 60],
[30, 70]
]
return (
<div>
<svg
viewBox="0 0 100 100"
style={{ border: "1px solid lightgray", width: "80vw" }}
>
<Guide start={points[0]} end={points[1]} />
<Guide start={points[2]} end={points[3]} />
<path
strokeWidth="1"
stroke="blue"
strokeOpacity={0.5}
fill="transparent"
d={curve(...points)}
/>
</svg>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment