How to manipulate edge curve style in cytoscape?

I have three nodes: Node1, Node2, and Node3 with edge connections as shown on the provided photo. My problem is that I have an edge connection on Node1 and Node3 (see red-colored edge) that I need to display a certain way as shown on the image.

I have tried curve-style of segments but I could not achieve the desired look, is there a way to manipulate the edge so that it looks like the red edge on the photo? Below is the style I applied so far. I am confused on what to put on segment-distances and segment-weights to achieve the edge look.

{
    selector: '#edge13',
    style: {
      'width': 3,
      'curve-style': 'segments',
      'segment-distances': [-20, 20, -20, 20],
      'segment-weights': [0, 0.2, 0.4, 0.8],
      'source-endpoint': '-50% 0',
      'target-endpoint': '50% 0',
    },
}

Solution

You can use:

    'width': 3,
    'curve-style': 'segments',
    'segment-distances': '0px 50px 50px 0px',
    'segment-weights': '-0.25 -0.25 1.25 1.25',

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {name: 'grid', rows: 1},
  style: [{
      selector: 'node',
      css: {
        'label': 'data(id)'
      }
    },
    {
      selector: '#n3n1',
      css: {
        'width': 3,
        'curve-style': 'segments',
        'segment-distances': '0px 50px 50px 0px',
        'segment-weights': '-0.25 -0.25 1.25 1.25',
        'line-color': 'red'
    },
}
  ],
  elements: {
    nodes: [{
        data: {
          id: 'n1'          
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      }
    ],
    edges: [{
        data: {
          id: 'n1n2',
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          id: 'n2n3',        
          source: 'n2',
          target: 'n3'
        }
      },
      {
        data: {
          id: 'n3n1',        
          source: 'n3',
          target: 'n1'
        }
      }
    ]
  }
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 95%;
  width: 95%;
  left: 0;
  top: 50;
  z-index = 900;
  position: absolute;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js">
  </script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>