← back to Merry Christmas Tree!compare with ground truth →
model output
LLaMA 4 Scout
Merry Christmas Tree!
A 0.40T 0.24
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 body {
9 background-color: #000;
10 overflow: hidden;
11 margin: 0;
12 padding: 0;
13 }
14 #star {
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 transform: translate(-50%, -50%);
19 font-size: 50px;
20 color: #fff;
21 animation: twinkle 2s infinite;
22 }
23 .trail {
24 position: absolute;
25 width: 2px;
26 height: 2px;
27 background-color: #ff69b4;
28 border-radius: 50%;
29 animation: trail 2s infinite;
30 }
31 @keyframes twinkle {
32 0% {
33 transform: translate(-50%, -50%) scale(1);
34 }
35 50% {
36 transform: translate(-50%, -50%) scale(1.2);
37 }
38 100% {
39 transform: translate(-50%, -50%) scale(1);
40 }
41 }
42 @keyframes trail {
43 0% {
44 top: 50%;
45 left: 50%;
46 transform: translate(-50%, -50%);
47 }
48 100% {
49 top: 100%;
50 left: 100%;
51 transform: translate(-50%, -50%);
52 }
53 }
54 </style>
55</head>
56<body>
57 <div id="star">★</div>
58 <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.1s;"></div>
59 <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.2s;"></div>
60 <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.3s;"></div>
61 <script>
62 let star = document.getElementById('star');
63 let trails = document.querySelectorAll('.trail');
64 let angle = 0;
65 function update() {
66 angle += 1;
67 star.style.top = `calc(50% - ${Math.sin(angle * 0.01) * 100}px)`;
68 star.style.left = `calc(50% - ${Math.cos(angle * 0.01) * 100}px)`;
69 trails.forEach((trail, i) => {
70 trail.style.top = `calc(50% - ${Math.sin(angle * 0.01 + i * 0.1) * 100}px)`;
71 trail.style.left = `calc(50% - ${Math.cos(angle * 0.01 + i * 0.1) * 100}px)`;
72 });
73 requestAnimationFrame(update);
74 }
75 update();
76 </script>
77</body>
78</html>