model output
LLaMA 4 Scout

Animated Concepts #3
A 0.56T 0.32
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>Animation</title>
7    <style>
8        body {
9            background-color: black;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .square {
18            position: absolute;
19            width: 10px;
20            height: 10px;
21            background-color: #ff69b4;
22        }
23        #square1 {
24            top: 50%;
25            left: 50%;
26            transform: translate(-50%, -50%);
27            animation: move1 5s infinite;
28        }
29        #square2 {
30            top: 50%;
31            left: 50%;
32            transform: translate(-50%, -50%);
33            animation: move2 5s infinite;
34        }
35        #square3 {
36            top: 50%;
37            left: 50%;
38            transform: translate(-50%, -50%);
39            animation: move3 5s infinite;
40        }
41        #square4 {
42            top: 50%;
43            left: 50%;
44            transform: translate(-50%, -50%);
45            animation: move4 5s infinite;
46        }
47        @keyframes move1 {
48            0% {
49                transform: translate(-50%, -50%) translate(0, 0) rotate(45deg);
50            }
51            100% {
52                transform: translate(-50%, -50%) translate(100px, 0) rotate(45deg);
53            }
54        }
55        @keyframes move2 {
56            0% {
57                transform: translate(-50%, -50%) translate(0, 0) rotate(45deg);
58            }
59            100% {
60                transform: translate(-50%, -50%) translate(80px, 0) rotate(45deg);
61            }
62        }
63        @keyframes move3 {
64            0% {
65                transform: translate(-50%, -50%) translate(0, 0) rotate(45deg);
66            }
67            100% {
68                transform: translate(-50%, -50%) translate(60px, 0) rotate(45deg);
69            }
70        }
71        @keyframes move4 {
72            0% {
73                transform: translate(-50%, -50%) translate(0, 0) rotate(45deg);
74            }
75            100% {
76                transform: translate(-50%, -50%) translate(40px, 0) rotate(45deg);
77            }
78        }
79    </style>
80</head>
81<body>
82    <div class="square" id="square1"></div>
83    <div class="square" id="square2"></div>
84    <div class="square" id="square3"></div>
85    <div class="square" id="square4"></div>
86</body>
87</html>