awesomephant/kat.html

## kat.html
<!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>
	<!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>