1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// This script creates an HTTP val that generates a Sparkline SVG and embeds an animated crawling cat GIF overlaying the screen.
// Load essential libraries
import { html } from "https://esm.town/v/stevekrouse/html";
import { sparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVG";
export default async function (req: Request): Promise<Response> {
const data = [5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 6]; // Sample data for the sparkline
// SVG and inline CSS to animate a crawling cat GIF
const bodyContent = `
<div>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:crawl 10s infinite;">
<div style="margin-top:100px;text-align:center;">
${await sparklineSVG(data)}
</div>
</div>
<style>
@keyframes crawl {
0% { top: 5%; left: 5%; }
25% { top: 5%; left: 95%; }
50% { top: 95%; left: 95%; }
75% { top: 95%; left: 5%; }
100% { top: 5%; left: 5%; }
}
</style>
`;
// Respond with generated HTML content
return html(bodyContent);
}