Created
February 19, 2018 10:04
-
-
Save benatkin/d8e03e69fa6b1efc2f8b7179e2230f0b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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