Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import { render } from "react-dom";
const curve = (start, control1, control2, end) => {
return [
"M",
start.join(" "),
"C",
control1.join(" "),
control2.join(" "),
end.join(" ")
].join(" ");
};
const line = (start, end) => {
return ["M", start.join(" "), "L", end.join(" ")].join(" ");
};
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 symmetricalCurvePoints = ({ controlX, endpointX, endpointDistance, controlDistance}) => (
[
[endpointX, 50 - endpointDistance / 2],
[controlX, 50 - controlDistance / 2],
[controlX, 50 + controlDistance / 2],
[endpointX, 50 + endpointDistance / 2]
]
)
const Curve = ({points, showGuides}) => {
const curvePath = (
<path
strokeWidth="1"
stroke="blue"
strokeOpacity={0.5}
fill="transparent"
d={curve(...points)}
/>
)
if (showGuides) {
return [
(<Guide start={points[0]} end={points[1]} />),
(<Guide start={points[2]} end={points[3]} />),
curvePath
]
} else {
return curvePath;
}
}
const Line = ({start, end}) => (
<path
strokeWidth="1"
stroke="blue"
strokeOpacity={0.5}
fill="transparent"
d={line(start, end)}
/>
)
const App = () => {
const leftCurvePoints = symmetricalCurvePoints({
controlX: 10,
endpointX: 35,
controlDistance: 40,
endpointDistance: 15
});
const rightCurvePoints = symmetricalCurvePoints({
controlX: 90,
endpointX: 65,
controlDistance: 40,
endpointDistance: 15
});
return (
<div>
<svg
viewBox="0 0 100 100"
style={{ border: "1px solid lightgray", width: "80vw" }}
>
<Curve points={leftCurvePoints} showGuides={false} />
<Curve points={rightCurvePoints} showGuides={false} />
<Line start={leftCurvePoints[0]} end={rightCurvePoints[3]} />
<Line start={leftCurvePoints[3]} end={rightCurvePoints[0]} />
</svg>
</div>
);
};
render(<App />, document.getElementById("root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment