Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 29, 2016 23:42
Show Gist options
  • Save anonymous/d15366010e4196bae49a5e8104a5bb18 to your computer and use it in GitHub Desktop.
Save anonymous/d15366010e4196bae49a5e8104a5bb18 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/cimoqob
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="1000" height="1000">
<path d="" stroke="#000" stroke-width="2" fill="none" />
</svg>
<script id="jsbin-javascript">
function generateCurve (x1, y1, x2, y2, verticalBias) {
var line = []
var mx = x1 + (x2 - x1) / 2
line.push('M', x1, y1)
if (verticalBias) {
var 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(' ')
}
var path = document.querySelector('path')
path.setAttribute('d', generateCurve(0, 1, 200, 200))
</script>
<script id="jsbin-source-javascript" type="text/javascript">function generateCurve (x1, y1, x2, y2, verticalBias) {
var line = []
var mx = x1 + (x2 - x1) / 2
line.push('M', x1, y1)
if (verticalBias) {
var 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(' ')
}
var path = document.querySelector('path')
path.setAttribute('d', generateCurve(0, 1, 200, 200))</script></body>
</html>
Raw
jsbin.cimoqob.js
function generateCurve (x1, y1, x2, y2, verticalBias) {
var line = []
var mx = x1 + (x2 - x1) / 2
line.push('M', x1, y1)
if (verticalBias) {
var 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(' ')
}
var path = document.querySelector('path')
path.setAttribute('d', generateCurve(0, 1, 200, 200))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment