function horizontalCurvePath (w, h, opts = {}) {

  let { fromBottom, vertical, offset } = Object.assign({

    fromBottom: false,

    vertical: false,

    offset: 0

  }, opts)

  let x1, y1, x2, y2

  if (fromBottom) {

    [x1, y1, x2, y2] = [0, h, w, 0]

    if (!vertical) {

      y1 -= offset

      y2 += offset

    }

  } else {

    [x1, y1, x2, y2] = [0, 0, w, h]

    if (!vertical) {

      y1 += offset

      y2 -= offset

    }

  }

  if (vertical) {

    x1 += offset

    x2 -= offset

  }

  let line = []

  let mx = x1 + (x2 - x1) / 2

​

  line.push('M', x1, y1)

  if (vertical) {

    let my = y1 + (y2 - y1) / 2

    line.push('C', x1, my, x2, my, x2, y2)

  } else {

    line.push('C', mx, y1, mx, y2, x2, y2)

  }

  return line.join(' ')

}

​

function generate

​

(function () {

  let strokeWidth = 10

  let [w, h] = [400, 100]

  let curve = horizontalCurve(w, h, {

    offset: strokeWidth / 2,

    fromBottom: false,

    vertical: false

  })

  let fragment = document.createElement('div')

  fragment.innerHTML = `

    <svg width="${w}px" height="${h}px" viewBox="0 0 ${w} ${h}">

      <g>

        <path d="${curve}" stroke-width="${strokeWidth}" stroke="#000" fill="none"></path>

      </g>

    </svg>

  `

  let svg = fragment.children[0]

  document.body.appendChild(svg)

})()