Horizontal SVG curve generator http://jsbin.com/cimoqob/13

horizontal-curve.js

function horizontalCurve (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 () {
  
  let strokeWidth = 10
  let [w, h] = [400, 100]
  
  let curve = horizontalCurve(w, h, {
    offset: strokeWidth / 2,
    fromBottom: true,
    vertical: true
  })
  
  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)
  
})()