import { html } from "https://esm.town/v/stevekrouse/html";
import { sparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVG";
export default async function() {
const sparkline = sparklineSVG([5, 10, 5, 20, 15, 10, 15, 20, 25, 30]);
return html(`
<html>
<body style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div>
<h1>Sparkline SVG Example with Animated Cat</h1>
${sparkline}
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/source.gif" style="position: absolute; animation: moveCat 5s linear infinite;" />
</div>
<!-- Keyframes for animation -->
<style>
@keyframes moveCat {
0% { transform: translate(0, 0); }
25% { transform: translate(100px, -100px); }
50% { transform: translate(200px, 0); }
75% { transform: translate(100px, 100px); }
100% { transform: translate(0, 0); }
}
</style>
</body>
</html>
`);
}