function mkStop (n, colr, opac, sel, stopElem) {
    const stop = stopElem || mkElem('stop', {
      id: 'jq_stop_' + Math.floor((Math.random() * 10000) + 1),
      'stop-color': colr,
      'stop-opacity': opac,
      offset: n
    }, curGradient)
    if (stopElem) {
      colr = stopElem.getAttribute('stop-color')
      opac = stopElem.getAttribute('stop-opacity')
      n = stopElem.getAttribute('offset')
    } else {
      curGradient.appendChild(stop)
    }
    if (opac === null) opac = 1

    const pickerD = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,' +
      '3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,' +
      '2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z'

    const pathbg = mkElem('path', {
      id: 'jq_pathbg_' + Math.floor((Math.random() * 10000) + 1),
      d: pickerD,
      fill: 'url(#jGraduate_trans)',
      transform: 'translate(' + (10 + n * MAX) + ', 26)'
    }, stopGroup)

    const path = mkElem('path', {
      d: pickerD,
      fill: colr,
      'fill-opacity': opac,
      transform: 'translate(' + (10 + n * MAX) + ', 26)',
      stroke: '#000',
      'stroke-width': 1.5
    }, stopGroup)

    path.addEventListener('mousedown', function (e) {
      selectStop(this)
      drag = curStop
      $win.addEventListener('mousemove', dragColor)
      $win.addEventListener('mouseup', remDrags)
      stopOffset = findPos(stopMakerDiv)
      e.preventDefault()
      return false
    })
    path.dataset.stop = stop.getAttribute('id')
    path.dataset.bg = pathbg.getAttribute('id')
    path.addEventListener('dblclick', function () {
      $this.querySelector('#jGraduate_LightBox').style.display = 'block'
      const colorhandle = this
      let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1
      let stopColor = stop.getAttribute('stop-color') || 1
      let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16)
      while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha }
      colr = stopColor.substr(1) + thisAlpha
      const jqPickerElem = $this.querySelector('#' + id + '_jGraduate_stopPicker')
      jqPickerElem.style.left = '100px'
      jqPickerElem.style.bottom = '15px'
      jPickerMethod(jqPickerElem, {
        window: { title: 'Pick the start color and opacity for the gradient' },
        images: { clientPath: $settings.images.clientPath },
        color: { active: colr, alphaSupport: true }
      }, function (clr) {
        stopColor = clr.val('hex') ? ('#' + clr.val('hex')) : 'none'
        stopOpacity = clr.val('a') !== null ? clr.val('a') / 256 : 1
        colorhandle.setAttribute('fill', stopColor)
        colorhandle.setAttribute('fill-opacity', stopOpacity)
        stop.setAttribute('stop-color', stopColor)
        stop.setAttribute('stop-opacity', stopOpacity)
        $this.querySelector('#jGraduate_LightBox').style.display = 'none'
        $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none'
      }, null, function () {
        $this.querySelector('#jGraduate_LightBox').style.display = 'none'
        $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none'
      },
      i18next
      )
    })
    const jqStopEls = curGradient.querySelectorAll('stop')
    for (const jqStopEl of jqStopEls) {
      const curS = jqStopEl
      if (Number(jqStopEl.getAttribute('offset')) > n) {
        if (!colr) {
          const newcolor = jqStopEl.getAttribute('stop-color')
          const newopac = jqStopEl.getAttribute('stop-opacity')
          stop.setAttribute('stop-color', newcolor)
          path.setAttribute('fill', newcolor)
          stop.setAttribute('stop-opacity', newopac === null ? 1 : newopac)
          path.setAttribute('fill-opacity', newopac === null ? 1 : newopac)
        }
        curS.insertAdjacentElement('beforebegin', stop)
        // curS.before(stop);
        // return false;
      }
      // return true;
    }
    if (sel) selectStop(path)
    return stop
  }
@param {Float} n
@param {Float|string} colr
@param {Float} opac
@param {boolean} [sel]
@param {SVGStopElement} [stopElem]
@returns {SVGStopElement}