Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const App = () => {
const points = symmetricalCurvePoints({
controlX: 10,
endpointX: 35,
endpointDistance: 15,
controlDistance: 35
})
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