Details

Using this simple Javascript mathematical cosine generation function a the ease-in-out distribution can be depicted using SVG in React as shown below.

Code

import "./styles.css"

/* from 0 to 1 */
const easeInOutSine = (n) => -(Math.cos(Math.PI * n) - 1) / 2

const App = () => {
  const width = 512
  const height = 256

  const cosinePath = [...Array(width).keys()]
    .map((i) => easeInOutSine((i + 1) / width) * height)
    .map((p, i) => `${i},${p}`)
    .join(" ")

  return (
    <div className="App">
      <h1>Cosine ease-in-out</h1>
      <svg
        width={width}
        height={height}
        viewBox={[0, 0, width, height].join(", ")} /* standard */
        xmlSpace="preserve"
      >
        <polyline
          fill="none"
          stroke="crimson"
          strokeWidth="1"
          points={cosinePath}
        />
      </svg>
    </div>
  )
}

export default App

Codesandbox