Skip to content

Instantly share code, notes, and snippets.

@awesomephant
Created February 4, 2020 18:16
Show Gist options
  • Save awesomephant/9f9cd5da7901eddcd32d82f80a2ece75 to your computer and use it in GitHub Desktop.
Save awesomephant/9f9cd5da7901eddcd32d82f80a2ece75 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<svg class='line'>
</svg>
<script>
const config = {
pointCount: 6,
debug: true
}
let points = []
let path;
function generatePathString(points) {
let s = 'M'
for (let i = 0; i < points.length; i++) {
s += '' //bezier sytax here
}
return s;
}
function animate() {
// Maybe the movement here needs to be done with
// actual noise so it looks continuous.
// Movement from linear movement of noise offset
window.requestAnimationFrame(animate)
path.setAttribute('d', generatePathString(points))
if (config.debug) {}
}
function init() {
let svgEl = document.querySelector('.line')
let w = window.innerWidth
let h = window.innerHeight
svgEl.setAttribute('width', w)
svgEl.setAttribute('height', h)
// Init points array
for (let i = 0; i < config.pointCount; i++) {
points.push({
currentX: (w / config.pointCount) * i,
currentY: h / 2
})
}
path = document.createElementNS(true, 'path')
path.setAttribute('d', generatePathString(points))
path.setAttribute('stroke', '3px')
svgEl.appendChild(path)
animate()
}
window.addEventListener('DOMContentLoaded', function () {
init();
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment