Skip to content

Instantly share code, notes, and snippets.

@n9iels
Last active October 28, 2018 22:58
Show Gist options
  • Save n9iels/32fef492ae0dc2e06f2c822983e3b373 to your computer and use it in GitHub Desktop.
Save n9iels/32fef492ae0dc2e06f2c822983e3b373 to your computer and use it in GitHub Desktop.
Testing with SVG and drawing a smooth curve between two points
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const start = { x: 200, y: 0 };
const stop = { x: 0, y: 100 };
// Mutations
const sumX = start.x - stop.x
const sumY = start.y + stop.y
// SVG draw
const M = `M ${start.x} ${start.y}`
const C = `C ${start.x} ${start.y + (sumY / 2)} ${sumX / 2} ${sumY / 2} ${sumX / 2} ${sumY / 2}`
const S = `S ${stop.x} ${sumY / 2} ${stop.x} ${stop.y}`
return (
<div className="App">
<svg height="400" width="400">
<path
d={`${M} ${C} ${S}`}
stroke="green"
stroke-width="3"
fill="none"
/>
</svg>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment