Skip to content

Instantly share code, notes, and snippets.

@leafac

leafac/hilbert.html

Last active February 25, 2021 05:00
Show Gist options
  • Save leafac/cf2a3561c6ce0389dd680cc0d07fcaf6 to your computer and use it in GitHub Desktop.
Save leafac/cf2a3561c6ce0389dd680cc0d07fcaf6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hilbert.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hilbert</title>
</head>
<body>
<svg width="600" height="600" viewBox="0 0, 1 1">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#83769C" />
<stop offset="100%" stop-color="#FF77A8" />
</linearGradient>
</defs>
<polyline stroke="url(#gradient)" stroke-width="0.002" fill="none" />
</svg>
<script>
const svg = document.currentScript.previousElementSibling;
const polyline = svg.querySelector("polyline");
// let points = [
// [1 / 4, 1 / 4],
// [1 / 4, 3 / 4],
// [3 / 4, 3 / 4],
// [3 / 4, 1 / 4],
// ];
let points = [
[1 / 4, 3 / 4],
[3 / 4, 1 / 4],
[1 / 4, 1 / 4],
[3 / 4, 3 / 4],
];
const ORDER = 6;
for (let order = 2; order <= ORDER; order++) {
const upperLeft = [];
const lowerLeft = [];
const lowerRight = [];
const upperRight = [];
for (const [x, y] of points) {
upperLeft.push([y / 2, x / 2]);
lowerLeft.push([x / 2, y / 2 + 1 / 2]);
lowerRight.push([x / 2 + 1 / 2, y / 2 + 1 / 2]);
upperRight.push([(1 - y) / 2 + 1 / 2, (1 - x) / 2]);
}
points = [...upperLeft, ...lowerLeft, ...lowerRight, ...upperRight];
}
(function animate(time) {
polyline.setAttribute(
"points",
points
.flat()
.map(
(coordinate, index) =>
coordinate + (Math.sin(time / 1000 + index) / 600) * 3
)
);
window.requestAnimationFrame(animate);
})(0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment